vue——项目上线操作
程序员文章站
2022-05-17 20:09:54
...
1、过滤掉console调试打印
在build文件夹中的 webpack.prod.conf.js 文件中把 UglifyJsPlugin 类修改为
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
2、在config文件夹中的index.js文件,修改build对象的静态资源路径 assetsPublicPath
build: {
assetsPublicPath: "./", //修改此路径
}
3、处理跨域问题
如果在开发环境中,如果在config文件夹中的index.js文件中使用了 proxyTable 代理路由,项目上线需要注释掉
proxyTable: {
"/backstage": {
target: "http://192.168.1.142:8080",
changeOrigin: true,
pathRewrite: {
"^/backstage": "/backstage"
}
}
},
如果不想那么麻烦,可以在 dev.env.js文件中,添加开发环境api属性(注意:api需要两层引号)
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOS:'"http://192.168.1.142:8080"'
})
在prod.env.js文件中添加生产环境api属性
module.exports = {
NODE_ENV: '"production"',
API_HOS:'"http://*****:****"'
}
然后在调用api时,使用 process.env.API_HOS 获取当前运行环境的api前缀,使用npm run dev会打开 dev.env.js文件,得到的是开发环境的api接口,使用npm run build打包会调用prod.env.js文件中的api
4、网站图标处理
在build文件夹中的webpack.prod.confi.js文件中的 HtmlWebpackPlugin 类中添加图标路径
new HtmlWebpackPlugin({
filename: config.build.index,
template: "index.html",
favicon: path.resolve('favicon.ico'), //icon图标就放在根目录
})