Vue CLI多环境配置学习入门

本文介绍了如何进行Vue CLI多环境配置学习入门，包括安装Vue CLI、创建Vue项目、配置多环境以及运行和打包项目的详细步骤。通过对不同环境配置文件的创建和使用，确保项目在开发、测试和生产环境中的正确性和一致性。整个过程涵盖了从安装到打包的全方位指导，帮助开发者轻松掌握Vue CLI多环境配置学习入门。

Vue CLI是Vue.js的命令行工具，用以帮助开发者快速搭建Vue.js项目。它通过提供预定义的配置和脚手架，为开发者提供了一个快速开始Vue.js开发的环境。Vue CLI能够自动生成项目结构，处理文件路径、模块化配置、构建工具链等，极大地降低了初始配置的复杂性。

多环境配置是指在开发过程中为不同的环境设置不同的配置，比如开发环境（development）、测试环境（testing）、生产环境（production）。通过多环境配置，开发者可以在不同环境下使用不同的配置文件，例如API地址、数据库配置、环境标识等。这有助于确保应用程序在各个环境中的正确性和一致性。

在开始使用Vue CLI之前，你需要确保已安装Node.js。Node.js是JavaScript的运行时环境，可以在服务端运行JavaScript代码。你可以通过Node.js官网下载并安装最新版本。

# 访问Node.js官网下载页面
https://nodejs.org/en/download/

# 如果使用apt-get安装，可以使用以下命令
sudo apt-get update
sudo apt-get install nodejs npm

安装完成后，你可以通过以下命令检查Node.js和npm是否已正确安装：

node -v
npm -v

安装Node.js后，可以使用npm全局安装Vue CLI。

npm install -g @vue/cli

安装完成后，可以使用以下命令检查Vue CLI是否安装成功：

vue --version

使用Vue CLI快速初始化一个新的Vue.js项目。

vue create my-project

执行上述命令后，会提示选择预设配置，选择默认的预设配置即可。

Vue CLI v4.5.10
? Please pick a preset: (Use arrow keys)
  Default ([m]anifest + [c]onfigure files, + [t]ests + [e]2e + [s]erver)
  Manually select features
> Default (Vue 2)
  Default (Vue 3)

选择完成后，Vue CLI将创建一个新的Vue项目，并安装必要的依赖包。

项目创建完成后，可以进入项目目录并查看项目结构。为了查看文件结构，你需要先安装tree命令。

sudo apt-get install tree

然后，进入项目目录并使用tree命令查看文件结构。

cd my-project
tree -L 3

输出示例：

.
├── public
│   ├── index.html
│   └── favicon.ico
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

多环境配置通常通过创建不同的环境配置文件来实现。在项目根目录下创建.env文件，用于配置不同的环境变量。

touch .env
touch .env.development
touch .env.production

编辑这些文件并设置不同的环境变量。例如：

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

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

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

在Vue CLI 3.x版本中，环境变量以VUE_APP_前缀开头，以确保这些变量不会被Vue CLI或Webpack混淆。

在项目中，你可以通过process.env对象访问这些环境变量。例如，在src/main.js中访问环境变量：

// src/main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

console.log('API URL:', process.env.VUE_APP_API_URL)
console.log('Environment:', process.env.VUE_APP_ENV)

使用npm run serve命令可以在开发环境中运行项目。

npm run serve

为了在其他环境下运行项目，你需要在package.json中定义不同的脚本。

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

运行开发环境和生产环境的命令分别为：

# 开发环境
npm run serve:dev

# 生产环境
npm run serve:prod

使用npm run build在生产环境中打包项目。

npm run build

同样，在package.json中定义不同的打包脚本。

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

打包命令分别为：

# 开发环境
npm run build:dev

# 生产环境
npm run build:prod

1. 安装Node.js和Vue CLI
2. 初始化Vue项目
3. 创建不同的环境配置文件
4. 在项目中使用环境变量
5. 根据环境运行项目
6. 根据环境打包项目

• Vue CLI官方文档：https://cli.vuejs.org/zh/guide/
• Vue.js官方文档：https://vuejs.org/v2/guide/
• 慕课网相关课程：https://www.imooc.com/course/list/vue

通过以上步骤，你可以成功地配置和使用不同环境的Vue项目。这将帮助你更好地管理和维护应用程序，确保在不同的环境中有不同的配置。