本章內容包含上一章思考的解決,還有一些其它的定制...
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-sass
NPM包: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呢?
- 還記得如何局域網訪問么,那如果想修改端口呢?
- 還記得如何打包部署么,可能會出現什么問題?
- 還記得如何考慮舊版本瀏覽器兼容么?
思考
- 項目結構怎么搭建呢?
- 頁面結構怎么布局呢?
- 哪些組件可以分離出來呢?
- 哪些工具單元可以分離出來呢?