1.打包分析代码
npm run preview -- --report
2.注释掉mock
注释掉之后就不打包了。
3.wepack排除打包
webpack排除打包-代码位置(vue.config.js)
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
// 配置需要排出的包
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT',
'cos-js-sdk-v5': 'COS'
}
},4.在html中采用外链引入排除的文件-代码位置(public/index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js" ></script>
</body>
</html>5.安装nginx
执行打包命令得到dist文件包
npm run build:prod
6.windows环境下nginx部署启动项目
将打包的文件放置到安装目录/html下
windows下停止服务
./nginx -s stop
7.nginx解决history的404问题
nginx.conf
location / {
root html/dist;
try_files $uri $uri/ /index.html;
}8.重启nginx
./nginx -s reload9.nginx配置代理解决生产环境跨域问题
# 反向代理,处理管理端发送的请求
location /prod-admin/ {
proxy_pass http://localhost:8089/admin/;
#proxy_pass http://webservers/admin/;
}
本文暂时没有评论，来添加一个吧(●'◡'●)