摘要：至于，為什么跟蹤文件因為這個功能是開發(fā)環(huán)境下獨有的，要修改開發(fā)環(huán)境吖，必然找開發(fā)環(huán)境的配置文件進行跟蹤。測試可行性重啟項目后，在瀏覽器中輸入是你本地，可通過查看能夠訪問，就說明局域網(wǎng)內(nèi)的其他端可以訪問。然而，這樣并沒有結(jié)束。

本章內(nèi)容包含上一章思考的解決，還有一些其它的定制...

關于對.vue文件模塊處理規(guī)則的配置依次可在build/webpack.base.conf.js->build/vue-loader.conf.js->build/utils.js文件中跟蹤；

而loaders的關鍵在于build/vue-loader.conf.js文件中對utils.cssLoaders的調(diào)用：

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

說了這么一堆，我想表達啥呢？

因為個人在項目中，習慣用scss編寫樣式，跟蹤以上文件發(fā)現(xiàn)，針對.vue文件的預處理loaders中已經(jīng)包含對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了呢？

恭喜你，會報錯...

查找發(fā)現(xiàn)，package.json中并沒有關于sass-loader的依賴，所以，我們需要安裝sass-loader、node-sassNPM包：npm i -D sass-loader、npm i -D node-sass。

安裝完成后，在src/components/HelloWorld.vue文件中進行測試：

默認情況下，初始化的環(huán)境是不允許局域網(wǎng)訪問的，如果想局域網(wǎng)訪問的話，跟蹤路徑build/webpack.dev.conf.js（為什么跟蹤這個文件呢？）可以發(fā)現(xiàn)：

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

這里指定了host字段，而HOST值在該文件可查找到const HOST = process.env.HOST，也就是說，如果想要局域網(wǎng)內(nèi)訪問，有兩種解決方案：

在命令行中配置--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.HOST
    port: 8080,
...

修改host: "localhost",為host: "0.0.0.0",，即可；

推薦使用配置文件修改，即：第二種。

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

因為這個功能是開發(fā)環(huán)境下獨有的，要修改開發(fā)環(huán)境吖，必然找開發(fā)環(huán)境的配置文件進行跟蹤。

注意：

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

重啟項目后，在瀏覽器中輸入http://192.168.1.106:8080/#/（192.168.1.106是你本地IP，可通過ipconfig /all查看）能夠訪問，就說明局域網(wǎng)內(nèi)的其他端可以訪問。

不信？你試試手機。

如果，你想和其它朋友分享你的成果，部署到服務器上或直接打包發(fā)給朋友，通過npm run build即可生成靜態(tài)資源dist/。

然而，打開dist/index.html，發(fā)現(xiàn)是空白頁，控制臺還報錯（資源找不到），人生失去了希望...

這是因為webpack生產(chǎn)配置文件output.publicPath配置有問題，跟蹤文件build/webpack.base.conf.js->build/webpack.prod.conf.js。

很好，我們在build/webpack.base.conf.js中就發(fā)現(xiàn)了：

  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的值修改為"./"

為什么這樣修改呢？

這是因為打包文件引用所在地址的組成規(guī)則為output.publicPath + filename。

然而，這樣并沒有結(jié)束。

如果在樣式中引入圖片，會報圖片路徑錯誤，引用地址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打包要區(qū)分兩個路徑：

打包路徑（文件存儲位置：output.path + [filename | name]）

引用路徑（文件互相引用的位置：output.publicname + [filename | name]）

目前還不能結(jié)束...

目前ES6的語法成為了主流，如果你在項目中使用了ES6，在一些較舊的瀏覽器中，呵呵...

像Object.assign、Array.from...方法無法使用，程序報錯。

怎么辦呢？

npm i -S babel-polyfill安裝polyfill，它會為ES2015+添加的新的API作兼容為低版本瀏覽器可用，俗稱“墊片”。

需要將polyfill打包到生產(chǎn)包中，即build/webpack.base.conf.js文件中：

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

還記得如何預處理scss么，那如果使用Less呢？

還記得如何局域網(wǎng)訪問么，那如果想修改端口呢？

還記得如何打包部署么，可能會出現(xiàn)什么問題？

還記得如何考慮舊版本瀏覽器兼容么？

項目結(jié)構(gòu)怎么搭建呢？

頁面結(jié)構(gòu)怎么布局呢？

哪些組件可以分離出來呢？

哪些工具單元可以分離出來呢？