vue-cli3.0 多环境打包配置

最近在用3.0的脚手架配Ts的项目,频繁的打包发布,用到了多环境打包问题
首先在项目中创建三个文件
我这里只用到了

  • 本地开发,
  • 测试,
  • 生产 三个环境

配置文件

  • .env

  • .env.development

  • .env.production
    没有这三个文件的自己创建就可以
    vue-cli3.0 多环境打包配置_第1张图片
    看看每个env文件中写的东西

  • .env 本地环境

NODE_ENV = 'local'
VUE_APP_CURENV = 'local'
  • .env.development 测试环境
NODE_ENV = 'development'
VUE_APP_CURENV = 'development'
  • .env.production 生产环境
NODE_ENV = 'production'
VUE_APP_CURENV = 'production'

我们在上方的env里写的代码是干嘛用的呢,
我们使用 process.env.VUE_APP_CURENV 可以获取VUE_APP_CURENV = 'production’的值,用来定义我们不同环境的接口

在我封装的aixos 中,我用了最简单的一种

var baseUrl = "";
switch (process.env.VUE_APP_CURENV) {
    case "local":
        baseUrl = "http://app-t.xxxxxxxxx80"; //开发
        break;
    case "development":
        baseUrl = "https://app-t.xxxxxxxxx.com"; //测试
        break;
    case "production":
        baseUrl = "https://app-t.xxxxxxxxx.com"; //生产环境url
        break;
}
const httpServer = (opts: any) => {
    const httpDefaultOpts = { // http默认配置
        method: opts.method,
        baseURL: baseUrl,
        url: opts.url,
        timeout: 100000,
        params: opts.params,
        data: opts.params,
        headers: opts.method == 'get' ? {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json',
            'Content-Type': 'application/json; charset=UTF-8',
            'systoken': '',
        } : {
                'Content-Type': 'application/json;charset=UTF-8',
                'systoken': '',
            },
    };

使用方法

vue-cli3.0 多环境打包配置_第2张图片
vue-cli3.0 多环境打包配置_第3张图片
在vue-cli3.0配置的package.json 文件中,我们有这几个指令

 "scripts": {
    "serve": "vue-cli-service serve", // npm run serve   启动项目
    "build": "vue-cli-service build --mode local",  //  npm  run build    打包本地环境
    "pro-build": "vue-cli-service build --mode production",  // npm run pro-build  打包生产环境
    "dev-build": "vue-cli-service build --mode development", // npm run dev-build  打包测试环境
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },

你在指令中 使用

  • npm run build
  • npm run dev-build
  • npm run pro-build

像build dev-build pro-build 可以改成常用的命名

就先写到这。。。。

你可能感兴趣的:(pc前端,vue)