vue-admin-template打包 部署至线上nginx环境
构建
// 打包正式环境 npm run build:prod // 打包预发布环境 npm run build:stage
发布
对于发布来讲,只需要将最终生成的静态文件,也就是通常情况下 将 dist
发布到你的服务器即可,需要注意的是dist目录下的 index.html
是服务的入口页面,在 js 和 css 路径已经确定的情况下,需要注意 index.html 中 js、css的引入路径是否正确
// 打包后,可能会发现index.html入口文件中,js、css引入路径不对, 需在打包前修改 vue.config.js 文件中publicPath的值 publicPath: './' // 说明:“./”指当前目录,即打包后入口文件index.html的同级目录
部署
服务器为nginx环境
# 在http模块下,新增一个server模块 server{ listen 80; server_name localhost; index index.html index.htm index.php; # 服务器上dist目录的地址 root /home/workspace/vue-admin-template/dist; location / { try_files $uri $uri/ /index.html; } # 反向代理api服务,可能会出现跨域问题,需要自行解决,楼主在后台api服务中解决了跨域问题,亦可在nginx中配置解决跨域 location /prod-api/ { proxy_pass http://10.8.0.5:8888/; } }