实战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，也就是说，如果想要局域网内访问，有两种解决方案：
- 在命令行中配置
--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文件？
因为这个功能是开发环境下独有的，要修改开发环境吖，必然找开发环境的配置文件进行跟踪。
注意：
- 修改本地服务器配置，要重启本地服务器（在命令行中
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打包要区分两个路径：
- 打包路径（文件存储位置：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呢？
- 还记得如何局域网访问么，那如果想修改端口呢？
- 还记得如何打包部署么，可能会出现什么问题？
- 还记得如何考虑旧版本浏览器兼容么？
思考
- 项目结构怎么搭建呢？
- 页面结构怎么布局呢？
- 哪些组件可以分离出来呢？
- 哪些工具单元可以分离出来呢？