1.使用vue-cli创建项目
vue init webpack vue-element-admin
1.1启用scss
/build/utils.js文件写了自动配置的代码,所以直接安装node-sass和sass-loader插件就行了
cnpm i node-sass sass-loader -D
1.2配置全局scss
// 安装sass-resources-loader插件
cnpm i sass-resources-loader -D
// 修改/build/utils.js文件
scss: generateLoaders('sass').concat({ loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/scss/conf.scss') } })
1.3使用dynamic-import-node插件解决异步路由热更新慢的问题
// 安装dynamic-import-node插件
cnpm i babel-plugin-dynamic-import-node -D
// 配置.babelrc
"env": {
"development": {
"plugins": ["dynamic-import-node"]
}
}
1.4配置网站图标favicon.ico
1.4.1配置HtmlWebpackPlugin插件
// 在webpack.dev.conf.js 里面的 plugins配置
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: './favicon.ico' //增加这条
}),
//在 webpack.prod.conf.js 里面 plugins 配置
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: './favicon.ico', //增加这条
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
1.4.2配置index.html
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
1.5浏览器中可以看到.vue源文件的问题
// 修改项目中的config/index.js文件中的 build 下的 productionSourceMap属性为false
build: {
productionSourceMap: false
}
网友评论