Vue开发环境和生产环境的路径问题

开发环境

开发环境相对简单，都是在自己机器上运行，设置一下代理避免访问接口时出现跨域问题。根目录配置vue.config.js (没有需要自己建)

module.exports = {
    publicPath: process.env.NODE_ENV == "development" ? "/static" : "/app/static",
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3036'
            }
        }
    }
}

publicPath会在编译前端时，自动添加资源链接的baseURL，如/index.html改为/static/index.html。注意是资源文件，不是接口URL

生产环境

上面的代码判断了运行环境，需要根据运维人员给的路径，去配置线上路径的，假如我们使用nginx做反向代理

location ~ /app/(.*) {
       proxy_pass http://127.0.0.1:3036/$1;
}

其中的3036运行我们真正的服务，需要将前端的请求地址http://m.abc.com/app/static/index.html映射过去。所以vue的publicPath需要配置为/app/static

接口地址

使用axios的话，修改main.js

import axios from "axios";
axios.defaults.baseURL = process.env.NODE_ENV == "development" ? "/" : "/api"