vue 多环境打包

我会带着你远行 2021-09-07 06:13 457阅读 0赞

package.json默认配置

"scripts": { 
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },

改为

"scripts": { 
        "serve": "vue-cli-service serve --mode development",
        "build": "vue-cli-service build --mode development",
        "test-build": "vue-cli-service build --mode test",
        "pro-build": "vue-cli-service build --mode production",
        "lint": "vue-cli-service lint"
      },

注：

1.  npm run serve 的时候，默认是 development 所以 --mode development可以省略
2.  process.env.VUE\_APP\_CURENV 默认也是development

全局axios配置

var baseUrl = "";
    console.log('当前环境', process.env.VUE_APP_CURENV)
    switch (process.env.VUE_APP_CURENV) { 
      case "development":
        baseUrl = "http://172.1.22.29:5000/api/v1"; //开发
        break;
      case "test":
        baseUrl = "http://172.1.22.29:5010/api/v1"; //测试
        break;
      case "production":
        baseUrl = "http://172.1.22.29:5010/api/v1"; //生产环境url
        break;
    }
    
    api.defaults.baseURL = baseUrl

新增文件

.env.development
    -----
    NODE_ENV = 'production'
    VUE_APP_CURENV = 'development'
    -----
    .env.production
    -----
    NODE_ENV = 'production'
    VUE_APP_CURENV = 'production'
    -----
    .env.test
    -----
    NODE_ENV = 'production'
    VUE_APP_CURENV = 'test'
    -----

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]  
本地同一局域网，通过ip查看

在config文件下的index.js文件中，修改host为：
    
    host: '0.0.0.0'，
    
    或者在package.json文件下"scripts"的"dev"后面加上–host 0.0.0.0"
    例如：
    
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
    
    重启服务可以看到通过localhost和IP地址都可以访问到这个服务。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210813/18d31e9307fb48ab9e142ed347378c7d.png