vue cli3.0代理配置以及打包配置问题

1、新建一个vue.config.js文件，同src目录同级

     

const webpack = require('webpack')

module.exports = {

    publicPath: '/',

    assetsDir: 'static',

    productionSourceMap: false,

    devServer: {

        host: 'localhost',

        port: 8080,

        proxy: {

            '/api':{

               target:'http://10.0.88.142:8220',

               secure:false,//如果是https接口，配置这个参数

               changeOrigin:true,//是否跨域

               pathRewrite:{      //将 /api 截取出去实际请求路径中不含/api

                  '^/api':''

               }

              },

           

        }

    },

    configureWebpack: {

 

           plugins: [

        

              new webpack.ProvidePlugin({

        

                $:"jquery",

        

                jQuery:"jquery",

        

                "windows.jQuery":"jquery"

        

              })

        

            ]

        

        }

    

}

proxy就是配置的代理，api就是前端本期服务转换接口的方法，配合webpack打包后后端需要配置nginx代理才能使用。

 

2、新建一个.env.development文件和.env.production文件

    在.env.development文件中加入

   //跨域 测试接口
    VUE_APP_URL = "/api" 就会在前端服务中请求后台数据里面自动加上/api方法

  在.env.production文件里加入

    //生产 后台接口 

    VUE_APP_URL = "http://10.0.88.142:8220"

 

3、在main.js中加入axios.defaults.baseURL = process.env.VUE_APP_URL; VUE_APP_URL就是.env文件里面配置的变量地址。

用npm run dev 启动前端服务会运行.env.development文件，npm run build 运行.env.production文件