title: Vue CLI 4与项目构建实战指南
date: 2024/6/9
updated: 2024/6/9
excerpt:
这篇文章介绍了如何使用Vue CLI优化项目构建配置，提高开发效率，涉及配置管理、项目部署策略、插件系统定制以及Webpack和TypeScript的深度集成技巧。
categories:
tags:
Vue CLI的作用和优势
Vue CLI（Vue.js Command Line Interface）是官方提供的一个标准工具，用于快速搭建Vue项目架构。它具有以下作用和优势：
Vue CLI的发展历程
Vue CLI自Vue.js诞生以来，就作为官方推荐的脚手架工具，随着Vue.js的发展而不断迭代。从最初的Vue CLI 2到Vue CLI 3，再到现在的Vue
CLI 4，它一直在优化项目结构和构建配置，提高开发效率和用户体验。
Vue CLI 4的主要特性
Vue CLI 4带来了以下主要特性：
Node.js和npm的安装与配置
Vue CLI 4需要Node.js环境，因此首先需要安装Node.js。Node.js通常与npm（node package manager）一同安装。可以从
cmdragon's Blog Node.js官网下载并安装最新版本的Node.js。
node -v和npm -v，检查安装是否成功。Vue CLI 4的安装
Vue CLI 4可以通过npm全局安装：
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
Vue CLI 4的升级
如果需要升级Vue CLI 4到最新版本，可以使用以下命令：
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
使用Vue CLI 4创建新项目
使用Vue CLI 4创建新项目，可以执行以下命令：
vue create project-name
在命令执行过程中，CLI会提供一系列选项，包括预设配置、Vue版本选择、添加插件等。
项目的目录结构和文件解释
Vue CLI 4创建的项目具有以下目录结构：
project-name/
│
├── node_modules/ # 项目依赖
├── public/ # 公共文件，如index.html
│ └── index.html
├── src/ # 源代码目录
│ ├── assets/ # 静态资源
│ ├── components/ # Vue组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── .gitignore # Git忽略文件
├── babel.config.js # Babel配置文件
├── package.json # 项目配置文件
└── vue.config.js # Vue项目配置文件
项目的配置和管理
项目的配置主要通过vue.config.js
文件进行。该文件提供了对Webpack配置的细粒度控制。此外，还可以通过环境变量来控制不同环境下的项目配置。项目的管理主要包括项目的启动、构建和测试等，这些都可以通过package.json
中的scripts字段来配置。
AD：等你探索
修改项目配置文件（vue.config.js）
vue.config.js是Vue CLI项目的可选配置文件，如果项目的构建系统和webpack配置满足你的需求，那么你不需要这个文件。但如果需要自定义配置，可以通过这个文件来修改。
例如，以下是一个简单的vue.config.js文件，它修改了基本的webpack配置：
module.exports = {
// 基本路径
publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
// 构建时的输出目录
outputDir: 'dist',
// 放置静态资源的目录
assetsDir: 'static',
// html的输出路径
indexPath: 'index.html',
// 文件名哈希
filenameHashing: true,
// eslint-loader 是否在保存的时候检查
lintOnSave: process.env.NODE_ENV !== 'production',
// 是否使用包含运行时编译器的Vue核心的构建
runtimeCompiler: false,
// 默认情况下 babel-loader 忽略其中的所有文件 node_modules
transpileDependencies: [],
// 生产环境 sourceMap
productionSourceMap: false,
// 跨域设置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null // 设置代理
},
// webpack配置 - 简单配置方式
configureWebpack: {
// 插件等配置
},
// webpack配置 - 链式配置方式
chainWebpack: (config) => {
// 链式配置
}
};
链接Webpack配置（chainWebpack）
Vue CLI 4推荐使用chainWebpack方法来修改Webpack配置，这是一个链式调用方法，可以更精细地控制Webpack配置。
chainWebpack: (config) => {
// 修改loader
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader/lib/loader.js')
.tap(options => {
// 修改选项...
return options;
});
// 添加插件
config.plugin('example').use(ExamplePlugin, [/* options */]);
}
插件的使用和自定义
Vue CLI 4允许通过vue.config.js文件中的plugins选项来添加自定义插件。
const ExamplePlugin = require('example-webpack-plugin');
module.exports = {
// ...其他配置
plugins: [
new ExamplePlugin({
// 插件选项
})
]
};
代码分割和懒加载
Vue CLI 4支持动态导入，这可以让你的应用实现代码分割和懒加载。
AD：享受无干扰的沉浸式阅读之旅
// 示例：动态导入组件
const MyComponent = () => import('./MyComponent.vue');
Tree-shaking和依赖优化
Webpack 4支持tree-shaking，可以帮助你去除未使用的代码。在vue.config.js中，可以通过配置来启用这项功能。
module.exports = {
// ...其他配置
configureWebpack: {
optimization: {
usedExports: true,
},
},
};
使用CDN加速项目加载
在vue.config.js中，可以配置外部链接来使用CDN。
module.exports = {
// ...其他配置
configureWebpack: {
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
// ...其他库
},
},
};
在HTML模板中，通过<script>和<link>标签引入CDN资源。
开发环境、测试环境和生产环境的配置
Vue CLI 4支持通过.env文件来配置不同环境的环境变量。例如：
// .env.development
VUE_APP_API_URL=http://localhost:3000/api
// .env.production
VUE_APP_API_URL=https://production-api.com/api
在package.json中，可以定义不同的启动和构建命令：
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:prod": "vue-cli-service build --mode production",
"build:test": "vue-cli-service build --mode test"
}
}
环境变量的使用
环境变量可以通过process.env在代码中访问。Vue CLI会自动加载以VUE_APP_开头的环境变量到客户端侧的代码中。
构建命令的定制
Vue CLI 允许你自定义构建命令，以适应不同的构建需求。你可以通过修改package.json中的scripts字段来达到这个目的。
例如，你可能想要创建一个特定的构建命令来构建生产环境的版本，并且使用一个特定的配置文件：
{
"scripts": {
"build": "vue-cli-service build",
"build:prod": "vue-cli-service build --mode production --config vue.config.prod.js"
}
}
在上面的例子中，build:prod命令会使用生产环境的模式 (--mode production)
并指定一个特定的配置文件 (--config vue.config.prod.js) 来进行构建。
此外，你还可以创建自定义的启动命令，以便在不同的开发环境中使用：
{
"scripts": {
"serve": "vue-cli-service serve",
"serve:mock": "vue-cli-service serve --mode mock --config vue.config.mock.js"
}
}
在这里，serve:mock命令会使用模拟数据的环境 (--mode mock) 并指定一个模拟数据的配置文件 (--config vue.config.mock.js)
来启动开发服务器。
总结
Vue CLI 4 提供了强大的配置选项，允许开发者根据具体需求定制化项目配置。通过vue.config.js文件，你可以修改 Webpack
配置、定义环境变量、使用插件以及优化构建过程。同时，CLI 也支持多环境配置，使得开发者能够更容易地管理不同环境下的项目设置。掌握这些高级配置技巧，可以帮助开发者更高效地开发和管理
Vue 项目。
AD：覆盖广泛主题工具可供使用
在 Vue CLI 项目中，构建命令通常指的是用来编译和打包项目文件的命令。Vue CLI 提供了以下常用的构建命令：
vue-cli-service build：这是默认的构建命令，用于构建生产环境的代码。它将编译源码并生成dist目录，其中包含了压缩后的静态文件。vue-cli-service serve：这个命令用于启动开发服务器，通常在开发阶段使用。项目的编译和打包通常指的是将.vue文件和其他资源文件（如 JavaScript、CSS、图片等）转换成浏览器可以理解的静态文件的过程。Vue
CLI 使用 Webpack 来处理这一过程，以下是编译和打包的基本步骤：
vue.config.js文件中的配置是否正确。.vue文件编译成 JavaScript 代码，同时处理 CSS 预处理器、图片等资源。dist目录下。热重载（Hot Module Replacement，HMR）是 Vue CLI 提供的一个功能，它可以在不刷新整个页面的情况下，通过替换更新的模块来实现实时预览更新。使用
Vue CLI 的vue-cli-service serve命令启动开发服务器时，默认就开启了热重载功能。
监控通常指的是对构建过程的监控，Vue CLI 提供了详细的构建日志和进度指示，以便开发者了解构建过程的状态。
静态资源的部署通常涉及到将构建后的dist目录中的文件上传到服务器或 CDN。以下是一些常见的部署方式：
持续集成（CI）和持续部署（CD）是现代软件开发的重要组成部分。集成 Vue CLI 项目到 CI/CD 流程通常涉及以下步骤：
自动化部署脚本可以帮助开发者自动化部署过程。以下是一个简单的自动化部署脚本的示例，使用 SSH 和 SCP 命令将文件部署到远程服务器：
#!/bin/bash
# 服务器配置
SERVER_IP="123.45.67.89"
SERVER_USER="username"
SERVER_PATH="/var/www/html"
# 本地构建目录
BUILD_PATH="./dist"
# 构建项目
npm run build
# 使用 SSH 连接到服务器，并使用 SCP 部署文件
scp -r $BUILD_PATH/* $SERVER_USER@$SERVER_IP:$SERVER_PATH
echo "部署完成"
这个脚本首先定义了服务器的 IP 地址、用户名和路径，然后构建项目，最后通过 SCP
将构建后的文件上传到服务器指定目录。在实际使用中，需要根据具体的服务器配置和项目需求来编写脚本。
在开始一个商城项目之前，需要进行详细的需求分析和设计。以下是一些关键步骤：
使用 Vue CLI 4 创建项目的基本步骤如下：
安装 Vue CLI 4：
npm install -g @vue/cli
创建新项目：
vue create mall-project
在创建过程中，可以选择预设配置或手动设置，包括 Vue 版本、添加的插件等。
进入项目并添加所需依赖：
cd mall-project
npm install vue-router vuex axios --save
根据设计图和功能规划，编写前端代码，配置路由和状态管理。
项目开发完成后，需要构建和部署：
构建项目：
npm run build
这将生成dist目录，包含了生产环境下的静态文件。
部署到服务器或云平台，可以使用自动化部署脚本或 CI/CD 工具。
企业官网的项目需求分析和设计通常包括以下内容：
构建企业官网的步骤与商城项目类似：
项目完成后，进行优化和部署：
错误：Error: Invalid or unexpected token
错误：Module not found
node_modules目录和package-lock.json错误：Cannot find name 'xxx'
import()）实现代码分割，减少初始加载时间。npm update -g @vue/cli更新 Vue CLI。vue upgrade。@vue/cli-plugin-babel：Babel 插件，用于转译 JavaScript 代码。@vue/cli-plugin-eslint：ESLint 插件，用于代码质量和风格检查。@vue/cli-plugin-router：Vue Router 插件，用于页面路由管理。@vue/cli-plugin Vuex：Vuex 插件，用于状态管理。vue-cli-plugin-element：Element UI 插件，用于快速搭建界面。vue-cli-plugin-i18n：国际化插件，用于多语言支持。vue-cli-plugin-lighthouse：Lighthouse 插件，用于性能检测。安装插件：
vue add plugin-name
或在vue.config.js中配置：
module.exports = {
plugins: [
['plugin-name', { /* 配置选项 */ }]
]
}
Vue CLI 4 项目通常包含一个vue.config.js文件，用于配置项目：
module.exports = {
// 基本路径
publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
// 构建时的输出目录
outputDir: 'dist',
// 放置静态资源的目录
assetsDir: 'static',
// html的输出路径
indexPath: 'index.html',
// 文件名哈希
filenameHashing: true,
// eslint-loader 是否在保存的时候检查
lintOnSave: process.env.NODE_ENV !== 'production',
// 是否使用包含运行时编译器的Vue核心的构建
runtimeCompiler: false,
// 默认情况下 babel-loader 忽略其中的所有文件 node_modules
transpileDependencies: [],
// 生产环境 sourceMap
productionSourceMap: false,
// 跨域设置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null // 设置代理
},
// webpack配置 - 简单配置方式
configureWebpack: {
// 插件等配置
},
// webpack配置 - 链式配置方式
chainWebpack: (config) => {
// 链式配置
},
// PWA 插件相关配置
pwa: {},
// 第三方插件配置
pluginOptions: {}
}
publicPath：设置基础路径，用于部署到非根路径。outputDir：设置构建输出目录。assetsDir：设置放置静态资源的目录。indexPath：设置 HTML 输出路径。filenameHashing：设置文件名是否包含hash，用于缓存控制。lintOnSave：设置是否在保存时进行ESLint检查。devServer：设置开发服务器相关配置。链式配置：使用chainWebpack方法进行细粒度的配置。
环境变量：通过 process.env访问环境变量，可以在vue.config.js中使用环境变量来设置不同的配置。
多环境配置
：通过设置不同的环境变量，可以实现开发环境、测试环境和生产环境的配置切换。可以在项目根目录下创建.env.development、.env.test
和.env.production文件，分别配置不同环境的变量。
外部配置文件：如果配置信息较为复杂，可以将配置抽离到外部的 JSON 或 YAML 文件中，然后在vue.config.js中引入。
自定义插件：如果官方插件或第三方插件不能满足需求，可以开发自定义插件。通过webpack的插件系统，可以创建具有特定功能的插件。
优化构建性能：通过配置webpack的externals选项，可以将一些大型库如lodash或moment等排除在构建之外，减少构建时间。
缓存策略：配置webpack的cache选项，可以提高构建的缓存命中率，加快构建速度。
CSS 相关配置：通过css选项，可以配置 CSS 的相关处理，如提取 CSS 文件、启用 CSS Modules 等。