vue-cli url怎么配生产环境开发环境

Question

用的webpack&vue-cli开发的项目，怎么判断开发环境用上面的，生产环境用下面的。开发和生产是什么东西，有什么不同呢？

//开发环境
const URL = {
    BASE:'http://192.168.31.78:9999/rs-bus/websocket'
}
//生产环境
    const URL = {
    BASE:'http://192.168.1.22:9999/rs-bus/websocket'
}

module.exports = URL

Answer 1

前端里面开发环境和生产环境的判断，可以放在编译过程去生效对应的代码，也可以放在运行过程根据路由的情形来判断。实际上，我们采用了后者，根据页面的路径就可以看出是开发环境还是生产环境。

例如，我们写了一个 env.js 文件，判断 hostname，

// env.js
export function getEnv() {
  const hostname = window.location.hostname;
  const isTest =
    hostname === 'h5test.example.cn' || hostname === '192.168.1.134';
  const isProd = hostname === 'h5.example.cn' || hostname === '192.168.1.62';

  return isProd ? 'prod' : isTest ? 'test' : 'dev';

}

export default getEnv();

上述的 env 作为项目根目录的模块，然后 xhr factory, 工具便可以引入这个环境，并作为判断条件。

import env from 'src/env';

export function getBaseURL(serviceDevHost, servicePort, serviceID) {
  if (env === 'dev') {
    return `http://${serviceDevHost}:${servicePort}/` + serviceID;
  } else if (env === 'test') {
    return 'http://testapi.example.cn/' + serviceID;
  } else {
    return 'http://api.example.cn/' + serviceID;
  }
}

如果是放在编译过程去做，那么可以利用环境变量，利用 webpack 的诸如 DefinePlugin 插件来写判断条件，例如REACT_APP_NODE_ENV 或者直接 NODE_ENV（将 process.env.NODE_ENV 译成直白的值）。并且在打包的时候加入环境变量了，例如CI很容易做到这一点。

Answer 2

查看官方说明文档

Answer 3

不要这样搞 用相对路径 如/api/ 在服务端用nginx做匹配转发即可

Answer 4

在main.js中
import Vue from 'vue'
你可以打印Vue.config看一下，其中有一个devtools，可以根据这个判断
Vue.config.devtools等于true时就是开发环境，等于false就是你打包后放在生产环境中了。
可以看一下vue源代码生成环境和开发环境的判断