vue-cil 4 跨域配置

首先在package.json 同级目录下新建一个vue.config.js文件

配置代码如下

module.exports = {
    publicPath: "/", // 部署应用包时的基本 URL
    outputDir: "dist", // npm run build 生成的文件夹，默认是dist
    assetsDir: "static", // 在dist文件夹下面生成static目录存放js,img,css等静态资源
    indexPath: "index.html", // 生成的单文件的，文件名，
    devServer: {
        host: "localhost", // 配置主机地址
        port: process.env.NODE_ENV == 'production' ? 3000 : 8080,//配置运行的端口
        // proxy: "http://localhost:3030/api", // 跨域代理！【重要！】
        proxy: { // 配置多个！
            '/api': {
                target: 'http://localhost:3030',
                changeOrigin: true,
                pathWrite: {
                    '^/api': ''
                }
            },
            // '/foo': {   //多端口配置
            // target: '<other_url>'
            // ws: true, // 跨域地址是https协议！
            // }
        },
    },
    chainWebpack(config) {

    }
}

如果axios里面配置的有baseURL,需改为跟自己端口一样,如:

// 创建一个axios实例
let $axios = axios.create({
    // baseURL: "http://localhost:3030/api",
    baseURL: "/api",
    timeout: 3000
})