實戰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呢？
• 還記得如何局域網訪問麼，那若是想修改端口呢？
• 還記得如何打包部署麼，可能會出現什麼問題？
• 還記得如何考慮舊版本瀏覽器兼容麼？

思考

• 項目結構怎麼搭建呢？
• 頁面結構怎麼佈局呢？
• 哪些組件能夠分離出來呢？
• 哪些工具單元能夠分離出來呢？