问题抛出

开发中场景经常有这么个问题，我本地测试是没问题的，然后部署到服务器，到别人电脑打开，就出现了Network error 404错误。

1. 可能是vue里的axios的baseUrl设置成本地的请求地址
2. 部署上去的时候这个baseUrl要去改那个文件例如/static/config.json，特别麻烦
3. 有没有办法直接 部署的时候把请求地址顺便改了呢？

方法

使用【模式和环境变量】，官网：模式和环境变量。

假设只有 生产环境(prod)地址：http://prod.szpwxd.cn 和开发环境(dev)地址：http://dev.szpxwd.cn

新建文件

1. vue-cli的根目录下，新建2个文件，.env.dev 和 .env.prod
   
   .env.dev 文件

   1 2 3 4 5

   # just a flag ENV = 'dev' # base api VUE_APP_BASE_API = 'http://dev.szpxwd.cn'

.env.prod 文件

1
2
3
4
5

# just a flag
ENV = 'prod'

# base api
VUE_APP_BASE_API = 'http://prod.szpwxd.cn'

使用

2、如何去使用呢？

修改 package.json 文件的scripts下的json对象。

• 用开发环境dev进行调试 （常用）

  1 2 3

  "scripts":{ "dev": "vue-cli-service serve --mode dev" }

• 用生产环境prod进行调试（可能会用）

  1 2 3

  "scripts":{ "dev": "vue-cli-service serve --mode prod" }

• 用开发环境dev进行远程部署（少用）

  1 2 3

  "scripts":{ "deploy:dev": "vue-cli-service build --mode dev && node ./deploy --mode 0", }

• 用生产环境prod进行远程部署 （常用）

  1 2 3

  "scripts":{ "deploy:prod": "vue-cli-service build --mode prod && node ./deploy --mode 0", }

调用

3、代码中调用

比如在axios中设置baseUrl时，他就会根据当前运行的环境自动去获取VUE_APP_BASE_API

1

baseURL: process.env.VUE_APP_BASE_API,

例如 运行vue-cli-service serve --mode dev，VUE_APP_BASE_API就会获取到http://dev.szpxwd.cn