深入浅出Vue CLI项目搭建从基础配置到高级应用技巧

威震华夏关云长

1. Vue CLI简介和安装

Vue CLI是Vue.js官方提供的标准工具，用于快速搭建Vue.js项目。它提供了一个零配置的原型开发环境，同时也是一个可扩展的、功能丰富的Vue.js开发工具链。

1.1 Vue CLI的优势

• 零配置快速原型开发：只需一个命令即可创建并运行一个Vue项目
• 丰富的官方插件集合：集成最佳实践，提供各种插件
• 完全可配置的构建系统：基于webpack，但封装了复杂配置
• 图形化项目管理界面：通过vue ui命令启动
• 现代化开发体验：支持热重载、保存时lint等功能

1.2 安装Vue CLI

在安装Vue CLI之前，确保你的计算机上已经安装了Node.js（版本8.9或更高，推荐10.13+）。可以通过在终端中运行以下命令来检查Node.js版本：

2. node -v

复制代码

安装Vue CLI使用npm（Node包管理器）：

2. npm install -g @vue/cli

复制代码

或者使用yarn：

2. yarn global add @vue/cli

复制代码

安装完成后，可以通过以下命令检查Vue CLI版本：

2. vue --version

复制代码

如果看到版本号，说明Vue CLI安装成功。

2. 创建第一个Vue项目

使用Vue CLI创建新项目非常简单，只需运行以下命令：

2. vue create my-first-vue-project

复制代码

这里的my-first-vue-project是项目名称，可以根据需要更改。

执行命令后，Vue CLI会提示你选择预设配置：

2. Vue CLI v4.5.13
3. ? Please pick a preset: (Use arrow keys)
4. ❯ default (babel, eslint)
5.   Manually select features

复制代码

• default：默认预设，包含Babel和ESLint
• Manually select features：手动选择功能，可以自定义项目配置

选择默认预设会直接创建项目，而选择手动选择功能则会进入更详细的配置流程。

2.1 手动选择功能配置

选择”Manually select features”后，会出现以下选项：

2. ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
3. ❯◉ Babel
4. ◯ TypeScript
5. ◯ Progressive Web App (PWA) Support
6. ◯ Router
7. ◯ Vuex
8. ◯ CSS Pre-processors
9. ◉ Linter / Formatter
10. ◯ Unit Testing
11. ◯ E2E Testing

复制代码

使用空格键选择需要的功能：

• Babel：用于将ES6+代码转换为向后兼容的JavaScript版本
• TypeScript：JavaScript的超集，添加了静态类型检查
• PWA Support：渐进式Web应用支持
• Router：Vue Router，官方路由管理器
• Vuex：Vue状态管理库
• CSS Pre-processors：CSS预处理器（如Sass、Less等）
• Linter / Formatter：代码风格检查和格式化
• Unit Testing：单元测试
• E2E Testing：端到端测试

选择完功能后，会针对每个功能进行更详细的配置，例如选择Vue版本、路由模式、CSS预处理器、linter配置等。

2.2 项目创建过程

配置完成后，Vue CLI会开始创建项目，安装所需的依赖。这个过程可能需要几分钟时间，具体取决于网络速度和所选功能。

创建完成后，进入项目目录并启动开发服务器：

2. cd my-first-vue-project
3. npm run serve

复制代码

或者使用yarn：

2. cd my-first-vue-project
3. yarn serve

复制代码

启动成功后，终端会显示访问地址，通常是：

2. App running at:
3. - Local:   http://localhost:8080/
4. - Network: http://192.168.x.x:8080/

复制代码

在浏览器中打开显示的地址，即可看到Vue项目的默认页面。

3. 项目结构解析

创建的Vue项目包含以下主要文件和目录：

2. my-first-vue-project/
3. ├── node_modules/          # 项目依赖
4. ├── public/                # 静态资源
5. │   ├── favicon.ico        # 网站图标
6. │   └── index.html         # HTML模板
7. ├── src/                   # 源代码
8. │   ├── assets/            # 资源文件（图片、样式等）
9. │   ├── components/        # Vue组件
10. │   ├── views/             # 页面视图（如果选择了Router）
11. │   ├── router/            # 路由配置（如果选择了Router）
12. │   ├── store/             # Vuex状态管理（如果选择了Vuex）
13. │   ├── App.vue            # 根组件
14. │   └── main.js            # 入口文件
15. ├── .gitignore             # Git忽略文件
16. ├── babel.config.js        # Babel配置
17. ├── package.json           # 项目配置和依赖
18. ├── package-lock.json      # 依赖版本锁定文件
19. ├── README.md              # 项目说明文档
20. └── vue.config.js          # Vue CLI配置（可选）

复制代码

3.1 主要文件解析

这是项目的HTML模板文件，Vue CLI会基于此文件生成最终的HTML文件。其中最重要的是：

2. <div id="app"></div>

复制代码

这是Vue应用的挂载点，Vue实例将挂载到这个DOM元素上。

这是应用的入口文件，负责创建Vue实例并挂载到DOM：

2. import Vue from 'vue'
3. import App from './App.vue'
5. Vue.config.productionTip = false
7. new Vue({
8.   render: h => h(App)
9. }).$mount('#app')

复制代码

如果选择了Router和Vuex，入口文件会包含相应的配置：

2. import Vue from 'vue'
3. import App from './App.vue'
4. import router from './router'
5. import store from './store'
7. Vue.config.productionTip = false
9. new Vue({
10.   router,
11.   store,
12.   render: h => h(App)
13. }).$mount('#app')

复制代码

这是应用的根组件，所有其他组件都会在这个组件下渲染：

2. <template>
3.   <div id="app">
4.     <img alt="Vue logo" src="./assets/logo.png">
5.     <HelloWorld msg="Welcome to Your Vue.js App"/>
6.   </div>
7. </template>
9. <script>
10. import HelloWorld from './components/HelloWorld.vue'
12. export default {
13.   name: 'App',
14.   components: {
15.     HelloWorld
16.   }
17. }
18. </script>
20. <style>
21. #app {
22.   font-family: Avenir, Helvetica, Arial, sans-serif;
23.   -webkit-font-smoothing: antialiased;
24.   -moz-osx-font-smoothing: grayscale;
25.   text-align: center;
26.   color: #2c3e50;
27.   margin-top: 60px;
28. }
29. </style>

复制代码

这个文件包含了项目的元数据和依赖信息：

2. {
3.   "name": "my-first-vue-project",
4.   "version": "0.1.0",
5.   "private": true,
6.   "scripts": {
7.     "serve": "vue-cli-service serve",
8.     "build": "vue-cli-service build",
9.     "lint": "vue-cli-service lint"
10.   },
11.   "dependencies": {
12.     "core-js": "^3.6.5",
13.     "vue": "^2.6.11"
14.   },
15.   "devDependencies": {
16.     "@vue/cli-plugin-babel": "~4.5.0",
17.     "@vue/cli-plugin-eslint": "~4.5.0",
18.     "@vue/cli-service": "~4.5.0",
19.     "babel-eslint": "^10.1.0",
20.     "eslint": "^6.7.2",
21.     "eslint-plugin-vue": "^6.2.2",
22.     "vue-template-compiler": "^2.6.11"
23.   }
24. }

复制代码

其中，scripts部分定义了可用的npm命令：

• serve：启动开发服务器
• build：构建生产版本
• lint：运行代码检查

4. 基础配置详解

Vue CLI提供了丰富的配置选项，让我们可以自定义项目的各个方面。

4.1 vue.config.js配置

Vue CLI项目可以通过在根目录创建vue.config.js文件来自定义配置。这个文件会导出一个包含配置选项的对象：

2. module.exports = {
3.   // 配置选项
4. }

复制代码

2. module.exports = {
3.   // 部署应用包时的基本URL
4.   publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
5.   
6.   // 输出文件目录
7.   outputDir: 'dist',
8.   
9.   // 放置静态资源的目录
10.   assetsDir: 'static',
11.   
12.   // 生产环境的source map
13.   productionSourceMap: false,
14.   
15.   // 开发服务器配置
16.   devServer: {
17.     port: 8080,
18.     open: true,
19.     proxy: {
20.       '/api': {
21.         target: 'http://backend-api.com',
22.         changeOrigin: true,
23.         pathRewrite: {
24.           '^/api': ''
25.         }
26.       }
27.     }
28.   },
29.   
30.   // CSS相关配置
31.   css: {
32.     loaderOptions: {
33.       sass: {
34.         additionalData: `@import "@/assets/styles/variables.scss";`
35.       }
36.     }
37.   }
38. }

复制代码

• publicPath：部署应用包时的基本URL，默认为’/‘。如果你的应用被部署在一个子路径上，你需要用这个选项指定这个子路径。
• outputDir：生产环境构建文件的目录，默认为’dist’。
• assetsDir：放置生成的静态资源的目录，默认为”。
• productionSourceMap：生产环境是否生成source map，默认为true。设置为false可以加速生产环境构建。
• devServer：开发服务器配置，可以设置端口、自动打开浏览器、代理等。
• css：CSS相关配置，可以配置预处理器选项等。

4.2 环境变量和模式

Vue CLI使用环境变量来管理不同环境下的配置。默认情况下，一个Vue CLI项目有三个模式：

• development：用于vue-cli-service serve
• test：用于vue-cli-service test:unit
• production：用于vue-cli-service build和vue-cli-service test:e2e

可以通过.env文件来配置环境变量：

2. .env                # 在所有环境中被载入
3. .env.local          # 在所有环境中被载入，但会被git忽略
4. .env.[mode]         # 只在指定模式中被载入
5. .env.[mode].local   # 只在指定模式中被载入，但会被git忽略

复制代码

例如，创建一个.env.development文件：

2. VUE_APP_API_BASE_URL=http://localhost:3000/api

复制代码

然后在代码中可以通过process.env.VUE_APP_API_BASE_URL访问这个变量：

2. const apiUrl = process.env.VUE_APP_API_BASE_URL

复制代码

注意：只有以VUE_APP_开头的变量才会被嵌入到客户端侧的包中。

4.3 Babel配置

Vue CLI使用Babel来转换JavaScript代码，确保在旧版浏览器中也能正常运行。Babel的配置可以在babel.config.js文件中进行：

2. module.exports = {
3.   presets: [
4.     '@vue/cli-plugin-babel/preset'
5.   ],
6.   plugins: [
7.     // 添加额外的Babel插件
8.   ]
9. }

复制代码

如果需要支持特定的浏览器，可以在package.json中添加browserslist字段：

2. "browserslist": [
3.   "> 1%",
4.   "last 2 versions",
5.   "not dead"
6. ]

复制代码

4.4 ESLint配置

ESLint是一个代码检查工具，可以帮助我们保持代码风格一致并发现潜在问题。ESLint的配置可以在项目根目录的.eslintrc.js文件中进行：

2. module.exports = {
3.   root: true,
4.   env: {
5.     node: true
6.   },
7.   extends: [
8.     'plugin:vue/essential',
9.     'eslint:recommended'
10.   ],
11.   parserOptions: {
12.     parser: 'babel-eslint'
13.   },
14.   rules: {
15.     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16.     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
17.     // 自定义规则
18.     'vue/no-unused-components': 'warn',
19.     'vue/no-unused-vars': 'warn'
20.   }
21. }

复制代码

5. 开发环境配置

开发环境的配置对于提高开发效率至关重要。Vue CLI提供了丰富的开发环境配置选项。

5.1 热重载

Vue CLI内置了热重载功能，当你修改代码并保存时，浏览器会自动刷新并应用更改，无需手动刷新页面。这个功能默认启用，无需额外配置。

5.2 开发服务器配置

开发服务器的配置可以在vue.config.js中的devServer选项中设置：

2. module.exports = {
3.   devServer: {
4.     // 服务器端口号
5.     port: 8080,
6.    
7.     // 服务器启动后自动打开浏览器
8.     open: true,
9.    
10.     // 启用热重载
11.     hot: true,
12.    
13.     // 在浏览器中显示编译错误
14.     overlay: {
15.       warnings: true,
16.       errors: true
17.     },
18.    
19.     // 代理配置
20.     proxy: {
21.       '/api': {
22.         target: 'http://backend-api.com',
23.         changeOrigin: true,
24.         pathRewrite: {
25.           '^/api': ''
26.         }
27.       }
28.     }
29.   }
30. }

复制代码

5.3 Source Map配置

Source Map可以帮助我们在调试时定位到原始代码，而不是编译后的代码。在开发环境中，Source Map默认启用。如果需要自定义，可以在vue.config.js中配置：

2. module.exports = {
3.   configureWebpack: {
4.     devtool: 'eval-source-map'
5.   }
6. }

复制代码

5.4 开发环境插件

Vue CLI提供了许多有用的开发环境插件，可以帮助我们提高开发效率。

Vue DevTools是一个浏览器扩展，可以帮助我们调试Vue应用。它提供了一个检查组件层次结构、查看组件状态、追踪事件等功能。

安装方法：

• Chrome:https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
• Firefox:https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

在编辑器中安装ESLint插件可以实时显示代码问题，帮助我们保持代码质量。

• VSCode: ESLint插件
• WebStorm: 内置ESLint支持

6. 生产环境配置

生产环境的配置主要关注性能优化、代码分割和资源管理等方面。

6.1 构建优化

Vue CLI默认为生产环境进行了一系列优化，包括：

• 代码压缩
• 代码分割
• 静态资源优化
• Source Map生成控制

这些优化可以通过vue.config.js进行自定义：

2. module.exports = {
3.   // 生产环境是否生成source map
4.   productionSourceMap: false,
5.   
6.   // 配置webpack
7.   configureWebpack: {
8.     performance: {
9.       hints: 'warning',
10.       // 入口起点的最大体积
11.       maxEntrypointSize: 512000,
12.       // 生成文件的最大体积
13.       maxAssetSize: 512000
14.     }
15.   },
16.   
17.   // 链式webpack配置
18.   chainWebpack: config => {
19.     // 移除 prefetch 插件
20.     config.plugins.delete('prefetch')
21.    
22.     // 压缩代码
23.     if (process.env.NODE_ENV === 'production') {
24.       config.plugin('compression')
25.         .use(require('compression-webpack-plugin'), [{
26.           algorithm: 'gzip',
27.           test: /\.(js|css|html|svg)$/,
28.           threshold: 10240,
29.           minRatio: 0.8
30.         }])
31.     }
32.   }
33. }

复制代码

6.2 代码分割

代码分割是优化大型应用加载性能的重要手段。Vue CLI默认会为你的代码进行分割，但你也可以通过动态导入进一步优化：

2. // 路由懒加载
3. const routes = [
4.   {
5.     path: '/about',
6.     name: 'About',
7.     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
8.   }
9. ]
11. // 组件懒加载
12. export default {
13.   components: {
14.     'MyComponent': () => import('./MyComponent.vue')
15.   }
16. }

复制代码

6.3 静态资源处理

Vue CLI对静态资源的处理遵循以下规则：

• 放在public目录中的文件会被原样复制到输出目录
• 放在src/assets目录中的文件会被webpack处理

对于较大的静态资源，可以考虑使用CDN：

2. module.exports = {
3.   chainWebpack: config => {
4.     if (process.env.NODE_ENV === 'production') {
5.       config.plugin('html')
6.         .tap(args => {
7.           args[0].cdn = {
8.             css: [
9.               'https://cdn.example.com/some.css'
10.             ],
11.             js: [
12.               'https://cdn.example.com/some.js'
13.             ]
14.           }
15.           return args
16.         })
17.     }
18.   }
19. }

复制代码

然后在public/index.html中使用：

2. <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
3.   <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
4.   <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
5. <% } %>
6. <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
7.   <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
8. <% } %>

复制代码

6.4 环境变量配置

生产环境通常需要特定的环境变量，可以通过.env.production文件配置：

2. VUE_APP_API_BASE_URL=https://api.production.com
3. VUE_APP_TITLE=My App

复制代码

然后在代码中通过process.env访问：

2. const apiUrl = process.env.VUE_APP_API_BASE_URL
3. const title = process.env.VUE_APP_TITLE

复制代码

7. 插件系统使用

Vue CLI的插件系统是其强大功能的核心，通过插件可以轻松扩展项目功能。

7.1 官方插件

Vue CLI提供了许多官方插件，可以通过以下命令安装：

2. vue add @vue/cli-plugin-<plugin-name>

复制代码

例如，添加TypeScript支持：

2. vue add typescript

复制代码

添加PWA支持：

2. vue add pwa

复制代码

7.2 第三方插件

除了官方插件，还有许多第三方插件可供使用。例如，添加Element UI组件库：

2. vue add element

复制代码

7.3 插件配置

大多数插件都提供配置选项，可以在vue.config.js中进行配置：

2. module.exports = {
3.   pluginOptions: {
4.     // 插件配置
5.   }
6. }

复制代码

例如，配置Element UI：

2. module.exports = {
3.   pluginOptions: {
4.     element: {
5.       size: 'small',
6.       zIndex: 3000
7.     }
8.   }
9. }

复制代码

7.4 自定义插件

你也可以创建自己的Vue CLI插件。一个基本的插件结构如下：

2. my-plugin/
3. ├── generator.js  # 生成器（用于创建文件）
4. ├── index.js      # 服务插件
5. ├── prompts.js    # 交互提示
6. └── package.json  # 插件元数据

复制代码

例如，创建一个简单的插件：

2. // index.js
3. module.exports = (api, options) => {
4.   // 修改webpack配置
5.   api.chainWebpack(webpackConfig => {
6.     webpackConfig.module
7.       .rule('my-rule')
8.       .test(/\.my$/)
9.       .use('my-loader')
10.       .loader('my-loader')
11.   })
12. }

复制代码

8. 自定义配置

虽然Vue CLI提供了许多默认配置，但有时我们需要更深入地自定义项目配置。

8.1 webpack配置

Vue CLI封装了webpack的复杂性，但仍然允许我们通过configureWebpack或chainWebpack选项来自定义webpack配置。

configureWebpack选项可以是一个对象或一个函数：

2. // 对象形式
3. module.exports = {
4.   configureWebpack: {
5.     plugins: [
6.       new MyAwesomeWebpackPlugin()
7.     ]
8.   }
9. }
11. // 函数形式
12. module.exports = {
13.   configureWebpack: config => {
14.     if (process.env.NODE_ENV === 'production') {
15.       // 生产环境特定配置
16.       config.plugins.push(new MyProductionWebpackPlugin())
17.     } else {
18.       // 开发环境特定配置
19.       config.plugins.push(new MyDevelopmentWebpackPlugin())
20.     }
21.   }
22. }

复制代码

chainWebpack选项允许我们基于webpack-chain进行更细粒度的配置：

2. module.exports = {
3.   chainWebpack: config => {
4.     // 添加别名
5.     config.resolve.alias.set('@', resolve('src'))
6.    
7.     // 修改插件选项
8.     config.plugin('preload').tap(options => {
9.       options[0].include = 'all'
10.       return options
11.     })
12.    
13.     // 删除插件
14.     config.plugins.delete('prefetch')
15.   }
16. }

复制代码

8.2 CSS配置

Vue CLI支持CSS预处理器，如Sass、Less和Stylus。可以通过vue.config.js配置CSS相关选项：

2. module.exports = {
3.   css: {
4.     // 是否将组件中的CSS提取到独立的CSS文件中
5.     extract: process.env.NODE_ENV === 'production',
6.    
7.     // 是否为CSS开启source map
8.     sourceMap: false,
9.    
10.     // 向CSS相关loader传递选项
11.     loaderOptions: {
12.       sass: {
13.         additionalData: `@import "@/styles/variables.scss";`
14.       },
15.       less: {
16.         globalVars: {
17.           primary: '#fff'
18.         }
19.       }
20.     }
21.   }
22. }

复制代码

8.3 构建目标配置

Vue CLI支持构建不同目标的应用，如库或Web组件：

2. module.exports = {
3.   // 构建为库
4.   configureWebpack: {
5.     output: {
6.       library: 'my-lib',
7.       libraryTarget: 'umd'
8.     }
9.   }
10. }

复制代码

然后在package.json中添加：

2. {
3.   "main": "dist/my-lib.umd.js",
4.   "unpkg": "dist/my-lib.umd.min.js",
5.   "files": [
6.     "dist/*",
7.     "src/*"
8.   ]
9. }

复制代码

9. 高级应用技巧

掌握一些高级技巧可以让我们更高效地使用Vue CLI。

9.1 多环境配置

除了默认的开发、测试和生产环境，我们可能需要更多的环境，如预发布环境。可以通过创建.env.staging文件来添加预发布环境：

2. NODE_ENV=production
3. VUE_APP_TITLE=My App (Staging)
4. VUE_APP_API_BASE_URL=https://api.staging.com

复制代码

然后在package.json中添加相应的脚本：

2. {
3.   "scripts": {
4.     "serve": "vue-cli-service serve",
5.     "build": "vue-cli-service build",
6.     "build:staging": "vue-cli-service build --mode staging"
7.   }
8. }

复制代码

9.2 多页面应用配置

Vue CLI默认创建单页面应用，但也可以配置为多页面应用：

2. module.exports = {
3.   pages: {
4.     index: {
5.       entry: 'src/pages/index/main.js',
6.       template: 'public/index.html',
7.       filename: 'index.html',
8.       title: 'Index Page',
9.       chunks: ['chunk-vendors', 'chunk-common', 'index']
10.     },
11.     about: {
12.       entry: 'src/pages/about/main.js',
13.       template: 'public/about.html',
14.       filename: 'about.html',
15.       title: 'About Page',
16.       chunks: ['chunk-vendors', 'chunk-common', 'about']
17.     }
18.   }
19. }

复制代码

9.3 自定义主题配置

对于使用UI组件库的项目，可能需要自定义主题。以Element UI为例：

2. // vue.config.js
3. module.exports = {
4.   css: {
5.     loaderOptions: {
6.       sass: {
7.         additionalData: `
8.           @import "~element-ui/packages/theme-chalk/src/common/var.scss";
9.           $--color-primary: #409EFF;
10.         `
11.       }
12.     }
13.   }
14. }

复制代码

9.4 微前端配置

Vue CLI可以用于构建微前端应用。例如，使用single-spa：

2. // vue.config.js
3. module.exports = {
4.   configureWebpack: {
5.     output: {
6.       library: 'vue-app',
7.       libraryTarget: 'umd'
8.     }
9.   },
10.   chainWebpack: config => {
11.     config.devServer
12.       .headers({
13.         'Access-Control-Allow-Origin': '*'
14.       })
15.   }
16. }

复制代码

然后创建入口文件：

2. // main.js
3. import singleSpaVue from 'single-spa-vue';
4. import App from './App.vue';
6. const vueLifecycles = singleSpaVue({
7.   Vue,
8.   appOptions: {
9.     render: h => h(App)
10.   }
11. });
13. export const bootstrap = vueLifecycles.bootstrap;
14. export const mount = vueLifecycles.mount;
15. export const unmount = vueLifecycles.unmount;

复制代码

9.5 自定义Webpack插件

通过自定义Webpack插件，我们可以实现更复杂的功能：

2. // vue.config.js
3. class MyCustomPlugin {
4.   apply(compiler) {
5.     compiler.hooks.emit.tapAsync('MyCustomPlugin', (compilation, callback) => {
6.       // 自定义逻辑
7.       console.log('This is my custom plugin!');
8.       callback();
9.     });
10.   }
11. }
13. module.exports = {
14.   configureWebpack: {
15.     plugins: [
16.       new MyCustomPlugin()
17.     ]
18.   }
19. }

复制代码

10. 性能优化

性能优化是Vue应用开发的重要环节，Vue CLI提供了多种优化手段。

10.1 代码分割优化

除了前面提到的路由懒加载，还可以优化第三方库的代码分割：

2. // vue.config.js
3. module.exports = {
4.   configureWebpack: {
5.     optimization: {
6.       splitChunks: {
7.         chunks: 'all',
8.         maxInitialRequests: Infinity,
9.         minSize: 20000,
10.         cacheGroups: {
11.           vendor: {
12.             test: /[\\/]node_modules[\\/]/,
13.             name(module) {
14.               const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
15.               return `npm.${packageName.replace('@', '')}`;
16.             }
17.           }
18.         }
19.       }
20.     }
21.   }
22. }

复制代码

10.2 图片优化

使用image-webpack-loader优化图片：

2. // vue.config.js
3. module.exports = {
4.   chainWebpack: config => {
5.     config.module
6.       .rule('images')
7.       .use('image-webpack-loader')
8.       .loader('image-webpack-loader')
9.       .options({
10.         mozjpeg: { progressive: true, quality: 65 },
11.         optipng: { enabled: false },
12.         pngquant: { quality: [0.65, 0.9], speed: 4 },
13.         gifsicle: { interlaced: false }
14.       })
15.       .end()
16.   }
17. }

复制代码

10.3 Gzip压缩

启用Gzip压缩可以显著减少传输数据量：

2. // vue.config.js
3. const CompressionPlugin = require('compression-webpack-plugin');
5. module.exports = {
6.   configureWebpack: {
7.     plugins: [
8.       new CompressionPlugin({
9.         algorithm: 'gzip',
10.         test: /\.(js|css|html|svg)$/,
11.         threshold: 10240,
12.         minRatio: 0.8
13.       })
14.     ]
15.   }
16. }

复制代码

10.4 预加载和预取

Vue CLI默认会添加预加载和预取提示，但可以根据需要自定义：

2. // vue.config.js
3. module.exports = {
4.   chainWebpack: config => {
5.     config.plugin('preload')
6.       .tap(options => {
7.         options[0].include = 'all'
8.         return options
9.       })
10.    
11.     config.plugin('prefetch')
12.       .tap(options => {
13.         options[0].fileBlacklist = [/\.map$/, /_preload\.js$/]
14.         return options
15.       })
16.   }
17. }

复制代码

10.5 DLL优化

对于大型项目，可以使用DLL优化构建速度：

2. // vue.config.js
3. const path = require('path');
5. module.exports = {
6.   configureWebpack: {
7.     plugins: [
8.       new webpack.DllReferencePlugin({
9.         context: process.cwd(),
10.         manifest: require('./public/vendor/vendor-manifest.json')
11.       })
12.     ]
13.   },
14.   chainWebpack: config => {
15.     config.plugin('html')
16.       .tap(args => {
17.         args[0].files.dll = {
18.           js: '/vendor/vendor.dll.js'
19.         }
20.         return args
21.       })
22.   }
23. }

复制代码

11. 常见问题与解决方案

在使用Vue CLI过程中，可能会遇到一些常见问题，本节将提供解决方案。

11.1 构建速度慢

问题：项目构建速度慢，影响开发效率。

解决方案：

1. 使用DLL优化：

2. // vue.config.js
3. const webpack = require('webpack');
4. const path = require('path');
6. module.exports = {
7.   configureWebpack: {
8.     plugins: [
9.       new webpack.DllReferencePlugin({
10.         context: process.cwd(),
11.         manifest: require('./public/vendor/vendor-manifest.json')
12.       })
13.     ]
14.   }
15. }

复制代码

1. 减少不必要的loader和plugin：

2. // vue.config.js
3. module.exports = {
4.   chainWebpack: config => {
5.     // 移除 prefetch 插件
6.     config.plugins.delete('prefetch')
7.    
8.     // 移除 preload 插件
9.     config.plugins.delete('preload')
10.   }
11. }

复制代码

1. 使用thread-loader进行多线程构建：

2. // vue.config.js
3. module.exports = {
4.   parallel: require('os').cpus().length > 1
5. }

复制代码

11.2 静态资源路径问题

问题：生产环境中静态资源路径不正确，导致资源加载失败。

解决方案：

在vue.config.js中正确配置publicPath：

2. module.exports = {
3.   publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
4. }

复制代码

11.3 跨域问题

问题：开发环境中请求API时遇到跨域问题。

解决方案：

使用开发服务器代理：

2. // vue.config.js
3. module.exports = {
4.   devServer: {
5.     proxy: {
6.       '/api': {
7.         target: 'http://backend-api.com',
8.         changeOrigin: true,
9.         pathRewrite: {
10.           '^/api': ''
11.         }
12.       }
13.     }
14.   }
15. }

复制代码

11.4 大文件警告

问题：构建时收到大文件警告，影响性能。

解决方案：

1. 增加性能阈值：

2. // vue.config.js
3. module.exports = {
4.   configureWebpack: {
5.     performance: {
6.       hints: 'warning',
7.       maxEntrypointSize: 512000,
8.       maxAssetSize: 512000
9.     }
10.   }
11. }

复制代码

1. 优化代码分割：

2. // vue.config.js
3. module.exports = {
4.   configureWebpack: {
5.     optimization: {
6.       splitChunks: {
7.         chunks: 'all',
8.         maxSize: 244000
9.       }
10.     }
11.   }
12. }

复制代码

11.5 IE兼容性问题

问题：Vue应用在IE浏览器中无法正常运行。

解决方案：

1. 确保引入了正确的polyfill：

2. // babel.config.js
3. module.exports = {
4.   presets: [
5.     [
6.       '@vue/cli-plugin-babel/preset',
7.       {
8.         useBuiltIns: 'entry',
9.         polyfills: [
10.           'es6.promise',
11.           'es6.symbol'
12.         ]
13.       }
14.     ]
15.   ]
16. }

复制代码

1. 在入口文件引入polyfill：

2. // src/main.js
3. import 'core-js/stable';
4. import 'regenerator-runtime/runtime';
5. import Vue from 'vue';
6. import App from './App.vue';
8. // ...其他代码

复制代码

11.6 内存溢出

问题：大型项目构建时出现内存溢出错误。

解决方案：

增加Node.js内存限制：

2. // package.json
3. {
4.   "scripts": {
5.     "serve": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve",
6.     "build": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build"
7.   }
8. }

复制代码

11.7 样式污染问题

问题：组件样式相互影响，导致样式污染。

解决方案：

1. 使用CSS Modules：

2. <template>
3.   <p :class="$style.example">This should be red</p>
4. </template>
6. <style module>
7. .example {
8.   color: red;
9. }
10. </style>

复制代码

1. 使用scoped样式：

2. <template>
3.   <p class="example">This should be red</p>
4. </template>
6. <style scoped>
7. .example {
8.   color: red;
9. }
10. </style>

复制代码

1. 使用CSS-in-JS库，如emotion或styled-components：

2. import { css } from '@emotion/css';
4. const className = css`
5.   color: red;
6. `;
8. export default {
9.   render() {
10.     return <p class={className}>This should be red</p>;
11.   }
12. };

复制代码

总结

Vue CLI是一个功能强大的工具，可以帮助我们快速搭建和配置Vue.js项目。通过本文的介绍，我们了解了Vue CLI的基本使用方法、配置选项、插件系统以及高级应用技巧。掌握这些知识，可以帮助我们更高效地开发Vue应用，并解决开发过程中遇到的各种问题。

从简单的项目创建到复杂的多环境配置、性能优化和问题解决，Vue CLI提供了丰富的功能和灵活的配置选项。希望本文能够帮助你更好地理解和使用Vue CLI，提高Vue应用的开发效率和质量。

版权声明

1、转载或引用本网站内容(深入浅出Vue CLI项目搭建从基础配置到高级应用技巧)须注明原网址及作者(威震华夏关云长)，并标明本网站网址(https://pixtech.cc/)。

2、对于不当转载或引用本网站内容而引起的民事纷争、行政处理或其他损失，本网站不承担责任。

3、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。

本文地址: https://pixtech.cc/thread-37581-1-1.html