vue-cli4环境变量配置和代理跨域配置

• 环境变量配置
• 跨域代理配置
• 总结
• 参考内容

环境变量配置

• 官方文档 https://cli.vuejs.org/zh/guide/mode-and-env.html#模式

• 在项目根目录中新建.env, .env.production, .env.pre 等文件

• NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用

• 一个环境文件只包含环境变量的“键=值”对:

        .env                # 在所有的环境中被载入
        .env.local          # 在所有的环境中被载入，但会被 git 忽略
        .env.[mode]         # 只在指定的模式中被载入
        .env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

• .env 文件
• ====> 执行 npm run serve 默认的本地开发环境配置

        // 默认的本地开发环境配置 每行后面不要加结束分号

        NODE_ENV = "development"
        BASE_URL = "./"

        // 打包后文件夹名字;默认dist;要在vue.config.js 中配置
        // 只有以 VUE_APP 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端的包中，
        // 代码中可以通过 process.env.VUE_APP_BASE_API 访问 这样定义的值
        // 在 vue.config.js 中可以获取到 outputDir ,但是在客户端代码中无法获取;
        outputDir = "dist"
        VUE_APP_API = "http://v.juhe.cn/joke"

• .env.production 文件
• ===>执行 npm run build 默认的环境配置（正式服务器）

        // build 默认的环境配置（正式服务器）每行后面不要加结束分号
        NODE_ENV = "production"
        BASE_RUL = "./"

        // 打包后文件夹名字;要在vue.config.js 中配置
        outputDir = "dist_pro"

        // 自定义的一些在客户端要获取的变量要以 VUE_APP_  开头,不然无法获取到;
        VUE_APP_OUT_PUTDIR = "dist_pro"
        VUE_APP_API = "http://www.xxxx.com/api"

• .env.pre 文件
• ===>执行 npm run pre 自定义 build 环境配置（预发服务器）

    //自定义 build 环境配置（预发服务器）每行后面不要加结束分号
    NODE_ENV = "production"
    BASE_URL = "./"

    // 打包后文件夹名字; 要在vue.config.js 中配置
    outputDir = "dist_pre"

    VUE_APP_API = "http://www.自定义环境.com"  

• package.json 一个模式有多中变量;

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint":  "vue-cli-service lint",
    "pre":   "vue-cli-service build --mode pre"
  }
  注意模式不同于 NODE_ENV，一个模式可以包含多个环境变量。
  也就是说，每个模式都会将 NODE_ENV 的值设置为模式的名称
  比如在 development 模式下 NODE_ENV 的值会被设置为 "development"。;

  你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。
  比如，如果你在项目根目录创建一个名为 .env.development 的文件，
  那么在这个文件里声明过的变量就只会在 development 模式下被载入。

  你可以通过传递 --mode 选项参数为命令行覆写默认的模式。
  例如，如果你想要在构建命令中使用开发环境变量，请在你的 package.json 脚本中加入;
  "dev-build": "vue-cli-service build --mode development",

• index.vue

// index.vue  获取最新的笑话
axios.get("/api/content/text.php",
        {   baseURL:process.env.NODE_ENV=="development"?'/':process.env.VUE_APP_API,
            params:{key:'19a578542216aeb8a23ccf5b05a61449'},
            headers:{'Content-Type':'application/json;charset=UTF-8'}
        })
    .then(res=>{
        console.log('text result',res);
    })

• http.js

// axios 封装,(示例demo 所以参数写死的);
// 本地开发环境的话要使用 devServer 代理来跨域;"development" 时 baseURL 设置为 "/";
// 使用devServer 代理时 baseURL不能设置值;
app.ajax = (url,method)=>{
  return axios({
       url:url,
       baseURL:process.env.NODE_ENV=="development"?'/':process.env.VUE_APP_API,
       method:method,
       params:{
           key:'19a578542216aeb8a23ccf5b05a61449'
       },

       data:{
           sort:'desc',
           page:1,
           pagesize:10,
           time:parseInt( new Date().getTime()/1000),
           key:'19a578542216aeb8a23ccf5b05a61449'
       },
       headers:{'Content-Type':'application/json;charset=UTF-8'},

   })
}

export default app;

跨域代理配置

• 本地开发时会涉及到跨域问题;至于在服务端 请加跨域请求头
• vue.config.js devServer 配置

// 注意使用devServer时 封装的 http 请求中,baseURL不能设置值;
module.exports  = {
    outputDir:process.env.outputDir || 'dist',

    // 由于浏览器有跨域限制,这里cli 工具提供了 启动本地代理服务器 请求
    devServer:{
        open:false,      // 是否打开浏览器;
        hotOnly:true,    // 是否热更新;

        proxy:{
            '/api':{   // 路径中有 /api 的请求都会走这个代理 , 可以自己定义一个,下面移除即可
                target:'http://v.juhe.cn/joke',    // 目标代理接口地址,实际跨域要访问的接口,这个地址会替换掉 axios.defaults.baseURL
                secure:false,
                changeOrigin:true,  // 开启代理，在本地创建一个虚拟服务端
                ws:true,       // 是否启用  websockets;
                pathRewrite:{   // 去掉 路径中的  /api  的这一截
                    '^/api':''
                }
            },

            '/test':{
                target:'http://v.juhe.cn/joke',   // 目标代理接口地址,实际跨域要访问的接口,这个地址会替换掉 axios.defaults.baseURL
                secure:false,
                changeOrigin:true,
                ws:true,
                pathRewrite:{
                    '^/test':'',
                }
            }
        
        },

    }

}

• 示例完整代码github:[https://github.com/wJiaLiang/vue-cli4]

总结

1. 代理配置 时 配置的主机地址 （即 baseURL） 应该为 "/"; 参考 http.js
2. 真时的地址为 在 vue.config.js 中配置; 参考 vue.config.js 中 devServer 配置项
3. 真时的接口地址为 'http://v.juhe.cn/joke/content/text.php'
4. 浏览器看到的地址是: http://localhost:8080/api/content/text.php?key=19a578542216aeb8a23ccf5b05a61449

参考内容

1. https://segmentfault.com/q/1010000022185695
2. https://cli.vuejs.org/zh/guide/mode-and-env.html#模式
3. https://github.com/chimurai/http-proxy-middleware