配置vue2的生产环境和开发环境

在根目录下新建.env.development(这个文件配置的是开发环境的变量)和.env.production(这个文件配置的是生产/正式环境的变量)两个文件，VUE_APP_BASE_URL的地址不用加引号！

  • 在.env.development中：
1 NODE_ENV = 'development'
2 VUE_APP_MODE = 'development'
3 #//VUE_APP_API_URL = http://localhost:3000   //这里如果是在vue.config.js中配置了跨域地址那这里就不能写这个， 要写跨域地址匹配的  比如跨域地址中匹配 ‘/api’ ,那就写下面那个变量
4 VUE_APP_BASE_URL=/api
  • 在.env.production中：
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
#//这里写项目上线后的接口地址
VUE_APP_BASE_URL = https://xxxxxxx
  • 在vue.config.js中：
 devServer: {
    // port: 8080,
    proxy: {
      'api': {
        target: "http://xxxxxxxx",
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
  • 在axios二次封装的文件，我这里是request.js文件
const instance = axios.create({
    // baseURL: 'http://xxxxxxxx',
    baseURL: process.env.VUE_APP_BASE_URL,
    timeout: 5000
})

这里刚开始我的baseURL是baseURL:'http://xxxxxxxx'换成了baseURL:'process.env.VUE_APP_BASE_URL' ，出现了如下的bug：

原因是baseURL:'process.env.VUE_APP_BASE_URL' 加了引号，变成了字符串，所以就找不到配置的https的地址！把引号去掉即可。

  • 在package.json中：配置相关的命令
1  "scripts": {
2     "serve": "vue-cli-service serve --mode production",
3     "build": "patch-package && vue-cli-service build",
4     "production": "patch-package && vue-cli-service build --mode production",
5     "development": "patch-package && vue-cli-service build --mode development",
6     "postinstall": "patch-package"
7   },

到这里配置就完成啦，如果哪里存在问题欢迎指正！

posted @ 2023-05-16 10:32  NUNA11  阅读(752)  评论(0)    收藏  举报