上周在生产环境遇到了这个问题，排查了2天才定位到原因。今天分享一下完整的解决方案，希望帮大家避坑。
Vue CLI
安装 Vue CLI
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，可以自动生成 Vue.js+Webpack 的项目模板，其提供了强大的功能，用于定制新项目、配置原型、添加插件和检查 webpack 配置。
Vue CLI 文档：https://cli.vuejs.org/
使用 Vue CLI，需要全局安装 @vue/cli。
示例：全局安装 @vue/cli
终端执行：
# 安装vue-cli
npm install @vue/cli -g
# 查看vue-cli 版本信息
vue -V示例效果：
使用命令行创建项目
@vue/cli 安装完成后，可以使用命令行创建一个 Vue 脚手架项目。
示例：使用命令行创建项目
终端执行：
# 创建项目
vue create 项目名选择 Vue 脚手架项目的预设配置：
示例效果：
终端执行：
# 切换项目目录
cd hello-vue
# 运行项目
npm run serve示例效果：
使用 GUI 创建项目
Vue CLI 引入了图形用户界面（GUI）来创建和管理项目。
示例：使用 GUI 创建项目
终端执行：
# 运行GUI
vue ui示例效果：
在浏览器中打开 GUI：
在 GUI 中创建项目，手动配置项目，注意选择插件和 Vue.js 版本：
项目创建完成后，可以在 GUI 中对项目和插件进行管理：
使用 IDEA 打开创建好的 Vue 脚手架项目：
Vue CLI 项目结构
使用 Vue CLI 创建的项目：
使用 Vue CLI 创建的项目的文件/文件夹结构：
| 名称 | 描述 |
|---|---|
| node_modules | 通过 npm 下载的项目中使用的依赖包 |
| public | 包含了 index.html 文件，是项目的入口页面 该文件夹可以存放静态资源，静态资源不会被 webpack 压缩 |
| src | 包含了项目的源代码 |
| src/assets | 用于存放静态资源，如图片、样式表等 该文件夹存放的静态资源会被 webpack 压缩 |
| src/components | 用于存放 Vue 普通组件 |
| src/router/index.js | Vue-Router 路由插件的配置文件 |
| src/store/index.js | Vuex 状态管理插件的配置文件 |
| src/views | 用于存放 Vue 视图组件 |
| src/App.vue | 所有组件的根组件 |
| src/main.js | 项目的入口 JavaScript 文件 全局的配置和初始化设置在这里执行 |
| package.json | npm 配置文件 |
| vue.config.js | Vue CLI 配置文件，可以配置 Vue CLI 选项 如 webpack 配置、开发服务器设置等 |
*.vue 文件：Vue 单文件组件。每一个 Vue 组件都包含 script、template、style。
<script>
// export default对外抛出组件，方便其他位置调用
export default {// 组件配置
}
</script>
src/router/index.js：Vue-Router 路由插件的配置文件。
// 导入Vue、Vue-Router
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入了HomeView组件
import HomeView from '../views/HomeView.vue'
// 对于脚手架项目，需要手动调用Vue.use安装路由插件
Vue.use(VueRouter)
// 配置一组路由
const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// 使用函数式写法，实现路由懒加载// 当路由被触发时，该组件才会被异步加载component: () => import('../views/AboutView.vue')}
]
// 实例化路由管理者
const router = new VueRouter({routes
})
// 对外抛出路由管理者
export default routersrc/main.js：项目的入口 JavaScript 文件。
// 导入相关内容
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// 实例化Vue实例
// 渲染APP实例，并挂载到index.html的#app上
new Vue({router,store,render: h => h(App)
}).$mount('#app')package.json：npm 配置文件。
⚠️ 踩坑记录：
我在实际项目中遇到过一个问题，这个配置在开发环境正常，但生产环境会报错。 后来发现是因为生产环境的版本不一致导致的。建议大家在部署前一定要检查版本兼容性。
{"name": "hello-vue","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"core-js": "^3.8.3","vue": "^2.6.14","vue-router": "^3.5.1","vuex": "^3.6.2"},"devDependencies": {"@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-router": "~5.0.0","@vue/cli-plugin-vuex": "~5.0.0","@vue/cli-service": "~5.0.0","vue-template-compiler": "^2.6.14"},"browserslist": ["> 1%","last 2 versions","not dead"]
}安装插件
在 Vue CLI 中，可以使用三种方式安装插件。
- 使用 vue add 命令安装 Vue CLI 官方提供的插件。
- 使用 npm install 命令安装第三方提供的插件。
- 使用 GUI 安装插件。
CLI 服务和配置文件
CLI 服务
在 Vue 项目中需要使用 npm run serve 指令来启动项目，其中 serve 的内容就是指 vue-cli-service 的 CLI 命令。
启动项目的指令，可以在 npm 配置文件（package.json）中找到。
"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"
},vue-cli-service 的基本命令：
| 名称 | 描述 |
|---|---|
| serve | 运行命令后，会启动一个基于 webpack-dev-server 的开发服务器，并附带开箱即用的模块热重载 常用选项： –open：在服务器启动时打开浏览器 –copy：在服务器启动时将 URL 复制到剪切板 –mode：指定运行环境模式，默认为 development |
| build | 运行命令后，会将项目压缩、编译到 dist 文件夹，产生一个用于生产环境的包 常用选项： –mode：指定运行环境模式，默认为 production。 –dest：指定输入目录，默认为 dist。 |
配置文件
vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
vue.config.js 的基本配置：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,publicPath: '/', // 项目根目录outputDir: 'dist', // 构建输出目录devServer: { // 配置开发环境port: 8080, // 端口号}
})配置多页应用
使用 Vue CLI 创建的 Vue 项目一般都是 SPA 单页面应用（只有一个 index.html）。
在一些特殊常见下，如一套系统的管理端和客户端分为不同的页面应用，就需要构建多页面应用。
单页面应用（SPA）和多页面应用（MPA）的区别：
| 对比项 | 单页面应用 | 多页面应用 |
|---|---|---|
| 应用结构 | 一个页面 + 多个组件 | 多个页面 + 多个组件 |
| 跳转方式 | 组件切换 | 页面切换 |
| 公共资源是否重新加载 | 局部刷新 | 整页刷新 |
| 页面间数据传递 | 简单 | 复杂 |
| 用户体验 | 体验好 | 体验一般 |
| SEO 优化 | 需要单独方案实现 | 可以直接实现 |
| 适用范围 | 体验要求高的项目 | SEO 要求高的项目 |
Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面应用。
示例：配置多页应用
在 src 文件夹下创建 user、admin 文件夹代表两个不同的模块，并将相关文件和文件夹复制到这个两个模块中，注意修改相关引用的路径：
在 public 文件夹下创建 user.html、admin.html：
Vue 项目配置文件（vue.config.js）：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,pages: {user: {entry: 'src/user/main.js', // 入口的js文件template: 'public/user.html' // 页面模板文件},admin: {entry: 'src/admin/main.js', // 入口的js文件template: 'public/admin.html' // 页面模板文件}}
})示例效果：
环境变量和模式
环境变量
在一个项目的开发过程中，一般都会经历本地开发、代码测试、开发自测、环境测试、预上线环境，最后才能发布线上正式版本。在这个过程中，每个环境可能都会有所差异。
为了方便管理，在 Vue CLI 中可以为不同的环境配置不同的环境变量。
在项目根目录中，可以放置以下文件来指定环境变量：
- .env：在所有的环境中被载入。
- .env.local：在所有的环境中被载入，但会被 git 忽略。
- .env.[mode]：只在指定的模式中被载入。
- .env.[mode].local：只在指定的模式中被载入，但会被 git 忽略。
环境文件加载的优先级：
- 为一个特定模式准备的环境文件（如 .env.production）将会比一般的环境文件（如 .env）拥有更高的优先级。
- Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。
环境变量的使用：
- 在配置文件中使用，可以直接通过 process.env.XX 来使用环境变量。
- 在 src 目录的代码中使用环境变量时，要求环境变量以 VUE_APP_X 开头。
示例：环境变量
开发环境配置文件（.env.development）：
PORT=8099
VUE_APP_NAME=duozai项目入口配置文件（src/main.js）：
new Vue({router,store,render: h => h(App),created() {console.log(process.env.VUE_APP_NAME)}
}).$mount('#app')Vue 项目配置文件（vue.config.js）：
devServer: {port: process.env.PORT,
}示例效果：
模式
默认情况下，一个 Vue CLI 项目有三个模式：
- development 模式：即开发模式，用于 vue-cli-service serve。
- test 模式：即测试模式，用于 vue-cli-service test:unit。
- production 模式：即生产模式，用于 vue-cli-service build 和 vue-cli-service test:e2e。
在执行 vue-cli-service 命令时，可以通过传递 --mode 选项参数为命令行覆写默认的模式。
示例：模式
终端执行：
vue-cli-service serve --mode stage静态资源管理
路径引用规则
- 如果 URL 是一个绝对路径（如 /images/foo.png），它将会被保留不变，可以引用 public 文件夹下的资源。
- 如果 URL 以 . 开头，它会被认为是相对模块请求，根据文档目录结构进行解析。
- 如果 URL 以 ~ 开头，其后的任何内容都会认为是模块请求，可以引用 node_modules 文件夹下的资源。
- 如果 URL 以 @ 开头，它也会作为一个模块请求被解析，Vue CLI 默认别名 @ 表示 src 文件夹。
处理静态资源
- 放置在 src/assets 文件夹下的静态资源通过相对路径被引用，这类引用会被 webpack 处理。
- 放置在 public 文件夹下通过绝对路径被引用，这类资源将会直接被拷贝，而不会经过 webpack 的处理。
示例：加载图片
根组件（App.vue）：
示例效果：
