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

配置前

讯享网

配置后

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

添加前目录

添加后目录

新增 开发包 配置文件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 打包开发环境包

4.2 打包测试环境包

4.3 打包生产环境包

五（附加）、.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/_/article/details/
https://blog.csdn.net/liu_yunzhao/article/details/
https://blog.csdn.net/block_xu/article/details/