做报纸网站,做班级网站的素材,界面设计ui,网站设计标题本章内容包含上一章思考的解决#xff0c;还有一些其它的定制... CSS预处理 关于对.vue文件模块处理规则的配置依次可在build/webpack.base.conf.js-build/vue-loader.conf.js-build/utils.js文件中跟踪#xff1b; 而loaders的关键在于build/vue-loader.conf.js文件… 本章内容包含上一章思考的解决还有一些其它的定制... 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.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呢还记得如何局域网访问么那如果想修改端口呢还记得如何打包部署么可能会出现什么问题还记得如何考虑旧版本浏览器兼容么思考 项目结构怎么搭建呢页面结构怎么布局呢哪些组件可以分离出来呢哪些工具单元可以分离出来呢
