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/;
    }
}