没有vue.config.js？
项目创建是不会自动生成vue.config.js这个文件的，需要自己手动添加，注意新建时要放在项目的根目录。
基础配置
module.exports = {
publicPath: "/",
outputDir: "dist", //输出文件目录(存放打包后的文件)
filenameHashing: false, //打包是不改变文件名（不添加hash）
productionSourceMap: false, //打包时不会生成.map文件
devServer: {
open: true, //编译完自动在浏览器打开
//下面的ip和端口按需配置，如8080已被其它进程占用，可改成8088等
host: "127.0.0.1",
port: 8080
}
};
IE空白问题！
原因：项目在IE浏览器打开空白是因为IE不支持ES6，无法解析。
解决办法：
1.安装 -> npm i -S @babel/polyfill
2.在src里面的main.js引入import "@babel/polyfill"
3.配置 babel.config.js
constplugins=[];
module.exports={ presets:[["@vue/app", { useBuiltIns:"entry"}]], plugins:plugins};
关于开启gzip？
不要在本地和服务器同时开启gzip，部署的时候在nginx配置就可以了。
去除生产环境的console.log日志
这个没法在开发环境测试是否有效，如把process.env.NODE_ENV修改成开发环境的话会报错。
按这个配置就行了。
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
}
}
优化首屏加载
去除预加载
chainWebpack: config => {
config.plugins.delete('prefetch')
},
完整配置
module.exports = {
publicPath: '/',
outputDir: 'dist',
productionSourceMap: false,
filenameHashing: false,
css: {
loaderOptions: {
sass: {
data: `@import "theme/color.scss";`
}
}
},
configureWebpack: config => {
config.entry.app = ["babel-polyfill", "./src/main.js"];
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
config["performance"] = {
"maxEntrypointSize": 10000000,
"maxAssetSize": 30000000
};
}
},
chainWebpack: config => {
config.plugins.delete('prefetch')
},
devServer: {
open: true
}
}