Vue 项目分环境打包的方法示例

下面我将详细讲解怎样进行 Vue 项目分环境打包。

什么是分环境打包？

在开发 Vue 项目的过程中，我们会遇到需要在不同的环境中部署和使用同一个项目的情况，例如在本地开发环境中使用 mock 数据，而在测试或生产环境中连接真实的后端 API。

分环境打包是指在不同的环境中，使用不同的配置信息来打出不同的包。每个环境都会有自己独立的一组配置信息，随着环境的不同，配置信息的内容也会有所不同。在打包的时候，可以根据不同的环境配置信息，选择性地打出不同的包。

如何实现分环境打包？

下面是一个简单的实现分环境打包的步骤：

新建一些 environment 变量，用于存储不同环境的配置信息，例如 VUE_APP_API_URL、VUE_APP_BASE_URL 等等。这些变量定义在 .env、.env.dev、.env.test、.env.prod 文件中。

VUE_APP_API_URL=/api VUE_APP_BASE_URL=/myapp/

根据环境不同，创建相应的 .env 文件，每个文件中定义的变量应该对应该环境的配置信息。例如在本地的 dev 环境，可以使用 mock 数据，而线上的 prod 环境，则需要连接真实的后端 API。
在 package.json 中，配置环境变量的入口文件。

json { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build:dev": "vue-cli-service build --mode development", "build:test": "vue-cli-service build --mode test", "build:prod": "vue-cli-service build --mode production" } }

根据当前环境执行相应的打包命令，例如在本地的开发环境中，可以执行 npm run build:dev 命令。
在打包之后，会在 dist 目录中生成相应的打包文件。可以通过修改 index.html 中的路径，来引用相应的打包文件。例如在 dev 环境中，可以引用 js/chunk-vendors.js、js/app.js 等文件，而在 prod 环境中，则需要引用 js/chunk-vendors.xxx.js、js/app.xxx.js 等压缩后的文件。

示例说明

示例一：使用不同的 base url

场景：在开发环境中，使用 localhost:3000 作为 base url，而在线上环境中，使用 www.example.com/myapp 作为 base url。

在 .env 文件中，新增 VUE_APP_BASE_URL 变量，并设置不同环境对应的值：

```
# .env.dev 文件
VUE_APP_BASE_URL=http://localhost:3000

# .env.prod 文件
VUE_APP_BASE_URL=http://www.example.com/myapp
```

在 Vue 中，使用环境变量 VUE_APP_BASE_URL 来配置 base url，示例：

```javascript
// 在 main.js 中配置 axios
import axios from 'axios'

const baseURL = process.env.VUE_APP_BASE_URL

const instance = axios.create({
baseURL,
})

export default instance
```

执行 npm run build:prod 命令，生成线上环境的打包文件。
在打包文件中，使用 VUE_APP_BASE_URL 来配置 js 和 css 文件的路径，示例：

```html
<link rel="preload" href="<%= BASE_URL %>js/app.f5053c67.js" as="script">
<link rel="preload" href="<%= BASE_URL %>js/chunk-vendors.12345678.js" as="script">

```