欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > vue >内容正文

vue

实战Vue简易项目（2）定制开发环境

发布时间：2023/12/10 vue 57 豆豆
生活随笔 收集整理的这篇文章主要介绍了 实战Vue简易项目（2）定制开发环境 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

本章内容包含上一章思考的解决，还有一些其它的定制...

CSS预处理

关于对.vue文件模块处理规则的配置依次可在build/webpack.base.conf.js->build/vue-loader.conf.js->build/utils.js文件中跟踪；

而loaders的关键在于build/vue-loader.conf.js文件中对utils.cssLoaders的调用：

... module.exports = {loaders: utils.cssLoaders({sourceMap: sourceMapEnabled,extract: isProduction}), ...

说了这么一堆，我想表达啥呢？

因为个人在项目中，习惯用scss编写样式，跟踪以上文件发现，针对.vue文件的预处理loaders中已经包含对scss的处理：

//utils.js文件exports.cssLoaders = function (options) {options = options || {} ...return {css: generateLoaders(),postcss: generateLoaders(),less: generateLoaders('less'),sass: generateLoaders('sass', { indentedSyntax: true }),scss: generateLoaders('sass'),stylus: generateLoaders('stylus'),styl: generateLoaders('stylus')} }

这样，是不是可以直接使用scss了呢？

恭喜你，会报错...

查找发现，package.json中并没有关于sass-loader的依赖，所以，我们需要安装sass-loader、node-sassNPM包：npm i -D sass-loader、npm i -D node-sass。

测试可行性

安装完成后，在src/components/HelloWorld.vue文件中进行测试：

局域网访问

默认情况下，初始化的环境是不允许局域网访问的，如果想局域网访问的话，跟踪路径build/webpack.dev.conf.js（为什么跟踪这个文件呢？）可以发现：

devServer: {clientLogLevel: 'warning', ...host: HOST || config.dev.host,port: PORT || config.dev.port,open: config.dev.autoOpenBrowser, ...

这里指定了host字段，而HOST值在该文件可查找到const HOST = process.env.HOST，也就是说，如果想要局域网内访问，有两种解决方案：

  • 在命令行中配置--host 0.0.0.0，即在/package.json的scripts中修改 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",；
  • 在config/index.js中:
    • module.exports = {dev: { ...host: 'localhost', // can be overwritten by process.env.HOSTport: 8080, ...

    修改host: 'localhost',为host: '0.0.0.0',，即可；

    推荐使用配置文件修改，即：第二种。

    至于，为什么跟踪build/webpack.dev.conf.js文件？

    因为这个功能是开发环境下独有的，要修改开发环境吖，必然找开发环境的配置文件进行跟踪。

    注意：

    • 修改本地服务器配置，要重启本地服务器（在命令行中Ctrl + c，然后npm run dev即可）才可应用新的配置。

    测试可行性：

    重启项目后，在浏览器中输入http://192.168.1.106:8080/#/（192.168.1.106是你本地IP，可通过ipconfig /all查看）能够访问，就说明局域网内的其他端可以访问。

    不信？你试试手机。

    打包文件路径

    如果，你想和其它朋友分享你的成果，部署到服务器上或直接打包发给朋友，通过npm run build即可生成静态资源dist/。

    然而，打开dist/index.html，发现是空白页，控制台还报错（资源找不到），人生失去了希望...

    这是因为webpack生产配置文件output.publicPath配置有问题，跟踪文件build/webpack.base.conf.js->build/webpack.prod.conf.js。

    很好，我们在build/webpack.base.conf.js中就发现了：

    output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath},

    跟踪config.build.assetsPublicPath找到config/index.js，修改：

    build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/', //将assetsPublicPath的值修改为'./'

    为什么这样修改呢？

    这是因为打包文件引用所在地址的组成规则为output.publicPath + filename。

    然而，这样并没有结束。

    如果在样式中引入图片，会报图片路径错误，引用地址static/css/static/css/img/XXX.png；

    需要修改build/utils.js：

    if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../'})} else {return ['vue-style-loader'].concat(loaders)}

    webpack打包要区分两个路径：

  • 打包路径（文件存储位置：output.path + [filename | name]）
  • 引用路径（文件互相引用的位置：output.publicname + [filename | name]）

    • ES6+

    目前还不能结束...

    目前ES6的语法成为了主流，如果你在项目中使用了ES6，在一些较旧的浏览器中，呵呵...

    像Object.assign、Array.from...方法无法使用，程序报错。

    怎么办呢？

    npm i -S babel-polyfill安装polyfill，它会为ES2015+添加的新的API作兼容为低版本浏览器可用，俗称“垫片”。

    需要将polyfill打包到生产包中，即build/webpack.base.conf.js文件中：

    module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js' //需要修改为app: ['babel-polyfill','./src/main.js']},

    章节回顾

    • 还记得如何预处理scss么，那如果使用Less呢？
    • 还记得如何局域网访问么，那如果想修改端口呢？
    • 还记得如何打包部署么，可能会出现什么问题？
    • 还记得如何考虑旧版本浏览器兼容么？

    思考

    • 项目结构怎么搭建呢？
    • 页面结构怎么布局呢？
    • 哪些组件可以分离出来呢？
    • 哪些工具单元可以分离出来呢？

    总结

    以上是生活随笔为你收集整理的实战Vue简易项目（2）定制开发环境的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。