开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第24天，点击查看活动详情
生产环境打包
npm run build
npm run build:preview 演示环境包 会加载.env.preview文件
npm run build:report 在目录中生成一个report.html文件
部署到服务器
把dist里面打包好的文件放在nginx的html目录里,目录里就能访问了
但是nginx只能部署一个项目,可以配置nginx给项目分配一个端口或者绑定域名
配置域名
server_name demo.eleadmin.com
配置https的访问方式
rewrite ^ https://$http_host$request_uri? permanent;
//配置ssl证书
ssl_certificate cert/xxx.pem;
开启gzip功能
gzip可以压缩3-5倍左右,能够大幅度优化首屏加载的速度
ele-admin已经配置了打包生成的gzip文件,只需要给nginx增加如下配置
gzip on;
gzip_min_length 10k;
部署在子路径
打包后默认只能部署在服务器的子路径
1.在vue.config.js中配置
module.exports = {
publicPath: '/eleadmin'
}
2.在src/router.index.js中增加base
const router = new vueRouter({
routes,
mode: 'history',
base: process.env.BASE_URL
})
3.重新打包后部署,再访问可以带上配置的子路径了
部署再任意路径,换路径不用重新打包
1.把vue.config.js中的publicPath配置为空或者./
2.把src/router/index.js中的路由history模式改为hash模式
3.修改src/utils/page-tab-utils.js中退出登录logout方法
location.reload();
4.最后重新打包,就可以部署再任意子路径,如nginx的 www/demo tomact的 webapps/demo/
修改项目端口
devServer: {
port: 8888
}
解决跨问题
如果后端没有设置cros(跨域资源共享),可在前端解决跨域问题
proxy {
'/api': {
target: 'http: //localhost:8080'
}
}
!这种方式需要接口都有一个统一的前缀,这里/api就是所有接口都会有的前缀
然后修改.env .env.development重新运行项目
VUE_APP_API_BASE_URL = /api
api里面使用axios请求路径只用写/system/user,因为没有带其他的网址前缀,所以浏览器发起的请求是在同域名下,就不存在跨域,然后webpack会代理到实际接口
需要注意这只是解决开发时候的跨域问题,生产环境需要用nginx配置代理
