Vue CLI配置基础：环境变量与开发环境配置

使用 Vue CLI 的环境变量功能与开发环境配置，可让您的 Vue.js 应用适应不同阶段的开发需求。此文章旨在提供关于环境变量管理、vue.config.js配置的概述，并通过实际代码示例说明如何根据环境调整开发服务器配置。掌握这些基础配置，能显著提升项目开发效率与一致性。

首先，确保已安装 Vue CLI。通过终端执行以下命令进行安装：

npm install -g @vue/cli

随后，使用 Vue CLI 创建新的 Vue 项目：

vue create my-project

进入项目目录并启动开发服务器：

cd my-project
npm run serve

环境变量用于存储特定于环境的信息，如 API 地址、服务器端口等。Vue CLI 通过 .env 文件管理和访问这些变量。

创建和使用 .env 文件

在项目根目录下创建 .env.development 和 .env.production 文件。例如：

# .env.development
VUE_APP_API_URL=http://localhost:8000
VUE_APP_ENV=development

# .env.production
VUE_APP_API_URL=https://example.com/api
VUE_APP_ENV=production

通过如下命令加载环境变量到开发服务器中：

npm run serve -- --env production

Vue CLI 通过 vue.config.js 文件支持多环境配置，实现灵活的环境配置。

配置 vue.config.js

在项目根目录下创建或编辑 .vue.config.js 文件。例如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: process.env.VUE_APP_API_URL,
        changeOrigin: true,
      },
    },
  },
};

通过 process.env 访问环境变量，并根据变量调整开发服务器配置。

配定开发环境路径

在 vue.config.js 中，使用环境变量自定义开发环境路径：

module.exports = {
  runtimeCompiler: true,

  devServer: {
    proxy: {
      '/api': {
        target: process.env.VUE_APP_API_URL,
      },
    },
    static: {
      directory: process.env.VUE_APP_PATH || './public',
    },
  },
};

使用环境变量配置开发服务器

在 main.js 或 src/main.js 中，可以访问环境变量来控制应用行为，例如：

import Vue from 'vue'
import App from './App.vue'

if (process.env.VUE_APP_API_URL) {
  Vue.prototype.$apiUrl = process.env.VUE_APP_API_URL
}

new Vue({
  render: h => h(App),
}).$mount('#app')

多环境配置是 Vue CLI 的关键功能之一，通过环境变量和 vue.config.js 文件实现差异化的配置。实践时，确保在 .env 文件中正确设置环境变量，并根据环境调整 vue.config.js 文件的配置。

掌握 Vue CLI 的多环境配置技巧可以显著提升开发效率和应用质量。鼓励在项目中应用这些配置，不断优化开发流程。遇到问题时，可参考 Vue.js 官方文档、社区论坛等资源获取帮助。

资源链接：

• Vue.js 官方文档：Vue.js 官方文档
• Vue CLI 官方文档：Vue CLI 官方文档
• Vue.js 社区论坛：Vue.js 社区论坛