Vue3.0进行开发环境、测试环境和生产环境配置

一、在 package.json 中配置打包命令

配置前

配置后

运行 npm run serve => 启动项目并自动打开浏览器
“serve”: “vue-cli-service serve --open”

运行 npm run dev 打包开发环境包
“dev”: “vue-cli-service build --mode development”

运行 npm run test 打包测试环境包
“test”: “vue-cli-service build --mode test”

运行 npm run build 打包生产环境包
“build”: “vue-cli-service build --mode production”

运行 npm run all 同时打包开发环境包、测试环境包、生产环境包
“all”: “vue-cli-service build --mode development && vue-cli-service build --mode test && vue-cli-service build --mode production”

二、在项目根目录中添加开发环境、测试环境和生产环境的打包配置文件

添加前目录

添加后目录

新增 开发包 配置文件1 .env.development

NODE_ENV = 'production'	// 打包模式
outputDir = 'dev'	// 要打包到的目录名称
VUE_APP_ENVIRONMENT = 'developmentEnv'	// 区分开发环境、测试环境和生产环境的变量

新增 测试包 配置文件2 .env.test

NODE_ENV = 'production'
outputDir = 'test'
VUE_APP_ENVIRONMENT = 'testEnv'

新增 生产包 配置文件3 .env.production

NODE_ENV = 'production'
outputDir = 'dist'
VUE_APP_ENVIRONMENT = 'productionEnv'

三、在项目根目录下新建 vue.config.js

module.exports = {
    lintOnSave: false,  // 关闭eslint校验
    publicPath: './',   // 静态资源路径改为相对路径，否则静态资源路径会报错
    outputDir: process.env.outputDir    // 打包生成目录
}

四、打包

4.1 打包开发环境包

运行 npm run dev 打包开发环境包
“dev”: “vue-cli-service build --mode development”

4.2 打包测试环境包

运行 npm run test 打包测试环境包
“test”: “vue-cli-service build --mode test”

4.3 打包生产环境包

运行 npm run build 打包生产环境包
“build”: “vue-cli-service build --mode production”

五（附加）、.env.development 或 .env.test 或 .env.production 文件中，NODE_ENV可以设置不同的打包模式，不同模式打出的包结构不同

5.1 在 .env.development 中设置 NODE_ENV = ‘development’

NODE_ENV = 'development'
outputDir = 'dev'
VUE_APP_ENVIRONMENT = 'developmentEnv'

5.2 在 .env.test 中设置 NODE_ENV = ‘test’

NODE_ENV = 'test'
outputDir = 'test'
VUE_APP_ENVIRONMENT = 'testEnv'

5.3 在 .env.production 中设置 NODE_ENV = ‘production’

NODE_ENV = 'production'
outputDir = 'dist'
VUE_APP_ENVIRONMENT = 'productionEnv'

5.4 npm run all 同时打包开发包、测试包、生产包

开发包的目录结构

测试包的目录结构

生产包的目录结构

5.5 因此，统一设置 NODE_ENV = ‘production’，是为了让开发包、测试包和生产包的包结构相同，便于维护和管理

六、配置基础url

6.1 在 /src/components下，新建 global.vue 文件

<script>
let baseUrl;
if (process.env.VUE_APP_ENVIRONMENT === "productionEnv") {
  // 生产包环境
  baseUrl = "https://app...";
} else if (process.env.VUE_APP_ENVIRONMENT === "testEnv") {
  // 测试包环境
  baseUrl = "https://test-app...";
} else if (process.env.VUE_APP_ENVIRONMENT === "developmentEnv") {
  // 开发包环境
  baseUrl = "https://test-app...";
}
export default {
  url: baseUrl,
};
</script>

6.2 来到 /src/main.js 中引入全局变量并注册

修改前

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

修改1

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)

app.use(store).use(router).mount('#app')

修改2

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)

import global from './components/global' // 引入全局变量
app.config.globalProperties.global = global // 注册全局变量

app.use(store).use(router).mount('#app')

6.3 在页面 /src/views/Home.vue 中使用全局变量

  created() {
      console.log(this.global.url)
  },

七、引入 axios，并成功请求接口

7.1 运行命令 cnpm i axios --save 安装axios

注意：这里最好使用cnpm安装，如果使用npm安装有可能会失败

7.2 来到 /src/main.js 中引入axios并注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)

import global from './components/global' // 引入全局变量
app.config.globalProperties.global = global // 注册全局变量

import axios from 'axios' // 引入axios
app.config.globalProperties.$http = axios // 注册axios

app.use(store).use(router).mount('#app')

7.3 在页面 /src/views/Home.vue 中请求接口

<template>
  <div>Home</div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {}
  },
  created() {
    console.log(this.global.url)
    this.getFloorNum()
  },
  methods: {
    // 获取仓位层数
    async getFloorNum() {
      var _this = this;
      const { data: res } = await _this.$http({
        url: _this.global.url + "/Api/...",
        method: "GET",
        params: {
          no_id: "583",
          type: 1,
        },
      });
      console.log(res);
    },
  }
}
</script>

参考文档：
https://blog.csdn.net/qq_41687299/article/details/107761265
https://blog.csdn.net/liu_yunzhao/article/details/94077271
https://blog.csdn.net/block_xu/article/details/111150883