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

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

什么是分环境打包？

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

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

如何实现分环境打包？

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

1. 新建一些 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/

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

2. 在 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"
}
}

1. 根据当前环境执行相应的打包命令，例如在本地的开发环境中，可以执行 npm run build:dev 命令。

2. 在打包之后，会在 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。

1. 在 .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
```

1. 在 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
```

1. 执行 npm run build:prod 命令，生成线上环境的打包文件。

2. 在打包文件中，使用 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">

```

示例二：使用不同的 API URL

场景：在开发环境中，使用 mock 数据作为 API URL，而在线上环境中，使用真实的 API URL。

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

```
# .env.dev 文件
VUE_APP_API_URL=/api

# .env.prod 文件
VUE_APP_API_URL=http://www.example.com/api
```

1. 在 Vue 中，使用环境变量 VUE_APP_API_URL 来配置 API URL，示例：

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

const apiURL = process.env.VUE_APP_API_URL

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

export default instance
```

1. 执行 npm run build:prod 命令，生成线上环境的打包文件。

2. 在服务器端，配置真实的 API URL，并在 Vue 中使用该 URL，示例：

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

const instance = axios.create({
baseURL: 'http://www.example.com/api',
})

export default instance
```

以上就是分环境打包的实现方法和示例说明。在实际开发中，可以根据需求和情况，灵活使用这些技巧来进行 Vue 项目的分环境部署。