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

CSS預(yù)處理

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

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

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

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

因為個人在項目中，習(xí)慣用scss編寫樣式，跟蹤以上文件發(fā)現(xiàn)，針對.vue文件的預(yù)處理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中并沒有關(guān)于sass-loader的依賴，所以，我們需要安裝sass-loader、node-sassNPM包：npm i -D sass-loader、npm i -D node-sass。

測試可行性

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

局域網(wǎng)訪問

默認情況下，初始化的環(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.HOSTport: 8080, ...

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

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

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

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

注意：

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

測試可行性：

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

不信？你試試手機。

打包文件路徑

如果，你想和其它朋友分享你的成果，部署到服務(wù)器上或直接打包發(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.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: 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]）

ES6+

目前還不能結(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']},

章節(jié)回顧

• 還記得如何預(yù)處理scss么，那如果使用Less呢？
• 還記得如何局域網(wǎng)訪問么，那如果想修改端口呢？
• 還記得如何打包部署么，可能會出現(xiàn)什么問題？
• 還記得如何考慮舊版本瀏覽器兼容么？

思考

• 項目結(jié)構(gòu)怎么搭建呢？
• 頁面結(jié)構(gòu)怎么布局呢？
• 哪些組件可以分離出來呢？
• 哪些工具單元可以分離出來呢？

總結(jié)

以上是生活随笔為你收集整理的实战Vue简易项目（2）定制开发环境的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。