实战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，也就是说，如果想要局域网内访问，有两种解决方案：

1. 在命令行中配置--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",；
2. 在config/index.js中:

module.exports = {
  dev: {
...
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 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.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: 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打包要区分两个路径：

1. 打包路径（文件存储位置：output.path + [filename | name]）
2. 引用路径（文件互相引用的位置：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呢？
• 还记得如何局域网访问么，那如果想修改端口呢？
• 还记得如何打包部署么，可能会出现什么问题？
• 还记得如何考虑旧版本浏览器兼容么？

思考

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