手把手完成前端Vue3 + Vite项目工程化搭建

vue3_vite_project

基于 Vue3 + Vite 搭建的前端工程化项目演示模板
环境准备

• 开发环境：Node.js v16.14.2 + npm v8.3.2
  
• 开发工具：Visual Studio Code or WebStorm
  
• 源代码管理：Git
  
• npm镜像：npm config set registry https://registry.npmmirror.com
  

技能栈

技能栈描述Vue渐进式 JavaScript 框架Vite新一代前端开发与构建工具Element Plus基于 Vue 3，面向设计师和开发者的组件库Pinia符合直觉的 Vue.js 状态管理库vue-routerVue.js 的官方路由管理库SassCSS 预处置惩罚器VueUse基于 Vue 组合式 API 的实用工具集Axios用于浏览器和 Node.js 的基于 Promise 的 HTTP 请求库Echarts一个基于 JavaScript 的开源可视化图表库Eslint可配置的 JavaScript 检查器Prettier代码格式化工具 项目构建

1. #创建项目
2. npm create vite
4. #安装依赖
5. npm install
7. #启动项目
8. npm run dev
10. #构建项目
11. npm run build

复制代码

到这一步，假如能乐成运行项目，恭喜你！一个项目的基本框架已经搭建完成！
整理项目布局

主要是让项目工程更加感觉清晰

1. <!--src/App.vue-->
2. <template>
3.   <div>
4.     <h1>App</h1>
5.   </div>
6. </template>

复制代码

删除 src/style.css 文件
删除 src/main.js 中引入的 style.css 文件
使用 Git 管理源代码

1. #Git仓库初始化
2. git init
4. #添加所有文件到版本库
5. git add .
7. #提交所有文件到版本库
8. git commit -m "feat: 项目初始化完成"
10. #新建 dev 分支，并切换到 dev 分支
11. git checkout -b dev

复制代码

本地代码堆栈初始化完成，之后的开发工作都在当 dev 分支上举行
根据技能栈提供的文档，完成项目搭建

安装 Element Plus 组件库

1. #安装 Element Plus
2. npm install element-plus

复制代码

引入 Element Plus 组件库并使用测试安装效果

1. # src/main.js
3. import { createApp } from 'vue'
4. import ElementPlus from 'element-plus' # 新增
5. import 'element-plus/dist/index.css' # 新增
6. import App from './App.vue'
8. const app = createApp(App)
9. app.use(ElementPlus) # 新增：使用 Element Plus 组件库
10. app.mount('#app')

复制代码

测试安装效果

1. <!--src/App.vue-->
2. <template>
3.   <div>
4.     <h1>App</h1>
5.     <el-button type="primary">button</el-button>
6.   </div>
7. </template>

复制代码

当按钮能正常显示时，说明安装乐成
安装 Vue Router 路由管理库

1. #安装 Vue Router
2. npm install vue-router

复制代码

在项目的 src 目次下新建一个 views 目次，然后在 views 目次下新建两个页面，用于路由跳转。
在项目的 src 目次下新建一个 router 目次，然后在 router 目次下新建一个 index.js 文件，该文件会作为 Vue Router 的入口文件，该文件内容如下

1. // src/router/index.js
2. import {createRouter, createWebHistory} from "vue-router";
4. const router = new createRouter({
5.     history: createWebHistory(),
6.     routes: [
7.         {
8.             path: "/login",
9.             name: "Login",
10.             component: () => import("../views/login/index.vue"),
11.         },
12.         {
13.             path: "/dashboard",
14.             name: "Dashboard",
15.             component: () => import("../views/dashboard/index.vue"),
16.         },
17.     ]
19. })
20. export default router

复制代码

在 src/main.js 文件中引入 Vue Router，并使用 Vue Router

1. // src/main.js
2. // ...
3. import router from './router' // 新增
4. app.use(router) // 新增：使用 Vue Router
5. // ...

复制代码

修改 App.vue 文件，添加路由跳转

1. <template>
2.   <div class="app-container">
3.     <ul>
4.       <li><router-link to="/dashboard">首页</router-link></li>
5.       <li><router-link to="/login">登录</router-link></li>
6.     </ul>
7.     <router-view />
8.   </div>
9. </template>

复制代码

访问首页和登录页，查看路由是否正常跳转
router-link 和 router-view 是 Vue Router 的两个核心组件，router-link 是用来实现路由跳转，router-view 是用来显示路由对应的内容。
安装 Pinia 状态管理库

1. #安装 Pinia
2. npm install pinia

复制代码

在项目的 src 目次下新建一个 store 目次，然后在 store 目次下新建一个 index.js 文件，该文件会作为 Pinia 的入口文件

1. // src/store/index.js
2. import {createPinia} from 'pinia'
4. const pinia = createPinia()
5. export default pinia

复制代码

在 src/main.js 文件中引入 Pinia，并使用 Pinia

1. // src/main.js
2. // ...
3. import pinia from './store' // 新增
4. app.use(router) // 新增：使用 Pinia
5. // ...

复制代码

在 src/store 目次下创建一个 modules 目次，然后在 modules 目次下创建一个 user 状态管理对象，用于管理整个项目的用户登录状态

1. // src/store/modules/user.js
2. import {defineStore} from 'pinia'
3. import {ref} from 'vue'
5. const useUserStore = defineStore('user', () => {
6.     const userInfo = ref({})
7.     const loginStatus = ref(false)
8.     const token = ref('')
9.     /**
10.      * 登录
11.      */
12.     function handleLogin() {
13.         return new Promise((resolve, reject) => {
14.             if(Math.random() > 0.8){
15.                 loginStatus.value = true
16.                 token.value = String(new Date().getTime())
17.                 userInfo.value = {
18.                     name: 'admin',
19.                     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80',
20.                 }
21.                 resolve('登录成功')
22.             }else {
23.                 reject('登录失败')
24.             }
25.         })
26.     }
28.     /**
29.      * 退出登录
30.      */
31.     function handleLogout() {
32.         return new Promise((resolve) => {
33.             loginStatus.value = false
34.             token.value = ''
35.             userInfo.value = {}
36.             resolve()
37.         })
38.     }
40.     return {
41.         userInfo,
42.         loginStatus,
43.         token,
44.         handleLogin,
45.         handleLogout
46.     }
47. })
49. export default useUserStore

复制代码

在登录页面，使用 Pinia 获取用户状态管理对象，并调用登录方法

1. <!--src/views/login/index.vue-->
2. <script setup>
3. import useUserStore from '../../store/modules/user'
4. const userStore = useUserStore()
5. import {ElMessage } from 'element-plus'
7. /**
8. * 登录
9. */
10. function login() {
11.   userStore.handleLogin().then((res) => {
12.     ElMessage.success(res)
13.   }).catch(err => {
14.     ElMessage.error(err)
16.   })
17. }
19. /**
20. * 退出登录
21. */
22. function loginOut() {
23.   userStore.handleLogout().then(() => {
24.     ElMessage.success('退出登录成功')
25.   }).catch(err => {
26.     ElMessage.error(err)
27.   })
28. }
29. </script>
31. <template>
32. <div class="login-container">
33.   <el-button type="primary" @click="login">登 录</el-button>
34.   <el-button type="primary" @click="loginOut">退出登录</el-button>
36.   <hr>
37.   <h1>当前登录状态：{{ userStore.loginStatus ? '已登录' : '未登录' }}</h1>
38.   <ul>
39.     <li>用户名：{{ userStore.userInfo.name }}</li>
40.     <li>头 像：<img :src="userStore.userInfo.avatar" alt=""></li>
41.   </ul>
42. </div>
43. </template>

复制代码

安装 Sass CSS 预处置惩罚器

1. #安装 Sass，安装时需要添加 -D 参数，表示将 Sass 添加到开发依赖中，在打包过程中，Sass 会自动编译为 CSS
2. npm install sass -D

复制代码

在项目的 src 目次下新建一个 styles 目次，然后在 styles 目次下新建一个 variables.scss 文件，该文件存放全局的 Sass 变量

1. //src/styles/variables.scss
2. $success: #48C78E;
3. $danger: #F28482;

复制代码

在首页测试 Sass 变量，在 src/views/dashboard/index.vue 文件中修改如下

1. <template>
2.   <h1 class="success">这是一个成功样式</h1>
3.   <h2 class="danger">这是一个告警样式</h2>
4. </template>
6. <style scoped lang="scss">
7. .success{
8.   color:$success;
9. }
10. .danger{
11.   color: $danger;
12. }
13. </style>

复制代码

此时浏览器会提示 Undefined variable. ，由于我们必要在 vite.config.js 文件中引入该文件，才能使用 Sass 变量

1. // vite.config.js
2. import { defineConfig } from 'vite'
3. import vue from '@vitejs/plugin-vue'
5. export default defineConfig({
6.     plugins: [vue()],
7.     css: {
8.         // CSS 预处理器
9.         preprocessorOptions: {
10.             // 定义全局 SCSS 变量
11.             scss: {
12.                 javascriptEnabled: true,
13.                 additionalData: "@use '/src/styles/variables.scss' as *;",
14.             },
15.         },
16.     },
17. })

复制代码

查看页面会显示乐成和告警样式，表示 Sass 变量已经正常工作了
安装 VueUse 工具库

1. #安装 VueUse
2. npm i @vueuse/core

复制代码

在 src/views/dashboard/index.vue 文件中，使用 VueUse 的 useMouse 方法，获取当前鼠标实时位置

1. <script setup>
2. import {useMouse} from '@vueuse/core'
3. const {x,y} = useMouse()
4. </script>
5. <template>
6.   <h1 class="success">这是一个成功样式</h1>
7.   <h2 class="danger">这是一个告警样式</h2>
9.   <p>当前鼠标位置：X:{{ x }}、Y:{{ y }}</p>
10. </template>
12. <style scoped lang="scss">
13. .success{
14.   color:$success;
15. }
16. .danger{
17.   color: $danger;
18. }
19. </style>

复制代码

页面上会实时显示鼠标的位置，表示 VueUse 工具库已经正常工作了，必要使用其它函数，可以参考 VueUse 文档
安装 Axios 网络请求库

1. #安装 Axios
2. npm install axios

复制代码

在 src 目次下新建一个 utils 目次，然后在 utils 目次下新建一个 request.js 文件，在该文件中，可以在发起请求前向请求头中添加一些请求头等信息

1. // src/utils/request.js
2. import axios from  'axios'
4. const request = axios.create({
5.     baseURL: 'http://xxx.xxx.xxx.xxx // 请求的后端接口地址
6. })
7. /**
8. * 请求拦截器
9. */
10. request.interceptors.request.use(config => {
11.     console.log('请求参数：',config)
12. })
13. /**
14. * 响应拦截器
15. */
16. request.interceptors.response.use(response => {
17.     console.log('响应参数：',response)
19. })
21. export default request

复制代码

在 src 目次下新建一个 api 目次，然后在 api 目次下新建一个 user.js 文件，在该文件中，封装一些用户相干的接口

1. import request from "../utils/request";
3. /**
4. * 获取验证码
5. * @param checkKey
6. */
7. export function getCodeInfo(checkKey) {
8.     return request({
9.         method: "get",
10.         url: `/xxx/xxx/${checkKey}`,
11.     });
12. }

复制代码

回到登录页面，测试获取验证码接口，修改如下：

1. <script setup>
2. import {getCodeInfo} from '../../api/user'
3. import {onMounted, ref} from "vue";
5. const captchaInfo = ref('')
6. onMounted(() => {
7.   getCodeInfo(new Date().getTime()).then(({data}) => {
8.     captchaInfo.value = data.result
9.   })
10. })
12. </script>
14. <template>
15. <div class="login-container">
16.   <ul>
17.     <li>验证码：<img :src="captchaInfo" alt=""></li>
18.   </ul>
19. </div>
20. </template>

复制代码

页面上乐成显示了验证码，表示 Axios 工具库已经正常工作了，之后其它 API 接口都统一放到 src/api 目次下统一管理
安装 Echarts 图表库

1. #安装 Echarts
2. npm install echarts

复制代码

在 src/views/dashboard/index.vue 文件中，使用 Echarts 的 init 方法，初始化一个图表

1. <script setup>
2. import * as echarts from 'echarts';
3. import {onMounted, ref} from "vue";
5. const chartRef = ref(null)
6. let echartClient = null
7. onMounted(() => {
8.   initChart()
9. })
10. function initChart() {
11.   echartClient =  echarts.init(chartRef.value)
12.   echartClient.setOption({
13.     tooltip: {},
14.     xAxis: {
15.       data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
16.     },
17.     yAxis: {},
18.     series: [
19.       {
20.         name: '销量',
21.         type: 'bar',
22.         data: [5, 20, 36, 10, 10, 20]
23.       }
24.     ]
25.   })
26. }
28. </script>
29. <template>
30.   <div class="chart-box" ref="chartRef" ></div>
31. </template>
33. <style scoped lang="scss">
34. .chart-box{
35.   width: 600px;
36.   height: 400px;
37. }
38. </style>

复制代码

页面上可以看到一个柱状图，表示 Echarts 工具库已经正常工作了
安装 Eslint 代码检查工具

1. #安装 Eslint 及相关插件
2. npm install eslint -D
3. npm install eslint-config-airbnb-base -D
4. npm install eslint-define-config -D
5. npm install eslint-plugin-import -D
6. npm install eslint-plugin-vue -D

复制代码

在项目更目次下新建一个 .eslintrc.js 文件，配置如下：

1. // .eslintrc.js
2. const { defineConfig } = require("eslint-define-config");
4. module.exports = defineConfig({
5.   root: true,
6.   env: {
7.     browser: true,
8.     node: true,
9.     jest: true,
10.     es6: true,
11.   },
12.   plugins: ["vue"],
13.   parser: "vue-eslint-parser",
14.   parserOptions: {
15.     ecmaVersion: "latest",
16.     sourceType: "module",
17.     allowImportExportEverywhere: true,
18.     ecmaFeatures: {
19.       jsx: true,
20.     },
21.   },
22.   extends: [
23.     "eslint-config-airbnb-base",
24.     "eslint:recommended",
25.     "plugin:vue/vue3-essential",
26.     "plugin:vue/vue3-recommended",
27.     "plugin:vue/vue3-strongly-recommended",
28.     "plugin:import/recommended",
29.     "plugin:import/errors",
30.     "plugin:import/warnings",
31.     // ".eslintrc-auto-import.json", // 解决 Eslint 提示 no-undef 错误
32.     "prettier",
33.     "plugin:prettier/recommended",
34.   ],
35.   /**
36.    * 规则说明：off 或 0 - 关闭规则；warn 或 1 - 打开规则作为警告（不影响退出代码）；error 或 2 - 打开规则作为错误（退出代码将为 1）
37.    */
38.   rules: {
39.     // 不使用制表符
40.     "prettier/prettier": 2,
41.     // 强制使用分号
42.     semi: [2, "always"],
43.     // 强制使用双引号
44.     quotes: [2, "double"],
45.     // 解决最后一个逗号
46.     // "comma-dangle": [2, "never"],
47.     // 关闭默认参数应为最后一个
48.     "default-param-last": 0,
49.     // 禁止未使用的变量
50.     "no-unused-vars": 1,
51.     // 关闭组件命名规则
52.     "vue/multi-word-component-names": 0,
53.     // 禁止使用多余的包
54.     "import/no-extraneous-dependencies": 0,
55.     // 确保在导入路径内一致使用文件扩展名
56.     "import/extensions": 0,
57.     // 确保导入指向可以解析的文件/模块
58.     "import/no-unresolved": 0,
59.     // 首选默认导出导入/首选默认导出
60.     "import/prefer-default-export": 0,
61.     // 要求使用 let 或 const 而不是 var
62.     "no-var": 2,
63.     // 禁止使用 new 以避免产生副作用
64.     "no-new": 1,
65.     // 禁止变量声明与外层作用域的变量同名
66.     "no-shadow": 0,
67.     // 禁用 console
68.     "no-console": 0,
69.     // 禁止标识符中有悬空下划线
70.     "no-underscore-dangle": 0,
71.     // 禁止在可能与比较操作符相混淆的地方使用箭头函数
72.     "no-confusing-arrow": 0,
73.     // 禁用一元操作符 ++ 和 --
74.     "no-plusplus": 0,
75.     // 禁止对 function 的参数进行重新赋值
76.     "no-param-reassign": 0,
77.     // 禁用特定的语法
78.     "no-restricted-syntax": 0,
79.     // 禁止在变量定义之前使用它们
80.     "no-use-before-define": 0,
81.     // 禁止直接调用 Object.prototypes 的内置属性
82.     "no-prototype-builtins": 0,
83.     // 禁止可以在有更简单的可替代的表达式时使用三元操作符
84.     "no-unneeded-ternary": 2,
85.     // 禁止重复模块导入
86.     "no-duplicate-imports": 2,
87.     // 禁止在对象中使用不必要的计算属性
88.     "no-useless-computed-key": 2,
89.     // 禁止不必要的转义字符
90.     "no-useless-escape": 0,
91.     // 禁用 continue 语句
92.     "no-continue": 0,
93.     // 强制使用一致的缩进
94.     indent: [2, 2, { SwitchCase: 1 }],
95.     // 强制使用骆驼拼写法命名约定
96.     camelcase: 0,
97.     // 强制类方法使用 this
98.     "class-methods-use-this": 0,
99.     // 要求构造函数首字母大写
100.     "new-cap": 2,
101.     // 强制一致地使用 function 声明或表达式
102.     "func-style": 0,
103.     // 强制一行的最大长度
104.     "max-len": 0,
105.     // 要求 return 语句要么总是指定返回的值，要么不指定
106.     "consistent-return": 0,
107.     // 强制switch要有default分支
108.     "default-case": 2,
109.     // 强制剩余和扩展运算符及其表达式之间有空格
110.     "rest-spread-spacing": 2,
111.     // 要求使用 const 声明那些声明后不再被修改的变量
112.     "prefer-const": 2,
113.     // 强制箭头函数的箭头前后使用一致的空格
114.     "arrow-spacing": 2,
115.     // 只强制对象解构，不强制数组解构
116.     "prefer-destructuring": [2, { object: true, array: false }],
117.     // 禁止在对象中使用不必要的计算属性
118.     "no-unused-expressions": 0,
119.   },
120. });

复制代码

修改 package.json 文件，在 scripts 中添加 "lint": "eslint --ext .js,.vue --fix src" ，运行 npm run lint 命令，会自动修复全部代码标题
安装 Prettier 代码格式化工具

1. #安装 Prettier 及相关插件
2. npm install -D prettier
3. npm install -D eslint-plugin-prettier

复制代码

在项目根目次下新建一个 .prettierrc.cjs 文件，配置如下：

1. module.exports = {
2.   // JSX 中的右尖括号是否换行，默认false
3.   jsxBracketSameLine: false,
4.   // 文件末尾是否换行，默认true
5.   endOfLine: "auto",
6.   // 换行符类型 (lf|crlf|cr;默认lf)
7.   rangeStart: 0,
8.   // 单个属性是否换行，默认false
9.   singleAttributePerLine: false,
10.   // 是否使用双引号，默认true
11.   doubleQuote: true,
12.   // 是否使用单行注释，默认false
13.   experimentalTernaries: false,
14.   // (x)=>{},单个参数箭头函数是否显示小括号。(always:始终显示;avoid:省略括号。默认:always)
15.   arrowParens: "always",
16.   // 开始标签的右尖括号是否跟随在最后一行属性末尾，默认false
17.   bracketSameLine: false,
18.   // 对象字面量的括号之间打印空格 (true - Example: { foo: bar } ; false - Example: {foo:bar})
19.   bracketSpacing: true,
20.   // 是否格式化一些文件中被嵌入的代码片段的风格(auto|off;默认auto)
21.   embeddedLanguageFormatting: "auto",
22.   // 指定 HTML 文件的空格敏感度 (css|strict|ignore;默认css)
23.   htmlWhitespaceSensitivity: "css",
24.   // 当文件已经被 Prettier 格式化之后，是否会在文件顶部插入一个特殊的 @format 标记，默认false
25.   insertPragma: false,
26.   // 在 JSX 中使用单引号替代双引号，默认false
27.   jsxSingleQuote: false,
28.   // 每行最多字符数量，超出换行(默认80)
29.   printWidth: 120,
30.   // 超出打印宽度 (always | never | preserve )
31.   proseWrap: "preserve",
32.   // 对象属性是否使用引号(as-needed | consistent | preserve;默认as-needed:对象的属性需要加引号才添加;)
33.   quoteProps: "as-needed",
34.   // 是否只格式化在文件顶部包含特定注释(@prettier| @format)的文件，默认false
35.   requirePragma: false,
36.   // 结尾添加分号
37.   semi: true,
38.   // 使用单引号 (true:单引号;false:双引号)
39.   singleQuote: false,
40.   // 缩进空格数，默认2个空格
41.   tabWidth: 2,
42.   // 元素末尾是否加逗号，默认es5: ES5中的 objects, arrays 等会添加逗号，TypeScript 中的 type 后不加逗号
43.   trailingComma: "es5",
44.   // 指定缩进方式，空格或tab，默认false，即使用空格
45.   useTabs: false,
46.   // vue 文件中是否缩进 <style> 和 <script> 标签，默认 false
47.   vueIndentScriptAndStyle: false,
48. };

复制代码

修改 package.json 文件，在 scripts 中添加 "prettier": "prettier --write src/**/*.{vue,js,jsx,ts,tsx,json,css,scss,md}" ，运行 npm run prettier 命令，会自动格式化全部代码
性能优化及打包计谋

配置 Element Plus 按需导入

1. #安装插件
2. npm install -D unplugin-vue-components unplugin-auto-import

复制代码

修改 vite.config.js 文件，添加了 vue, vue-router, @vueuse/core 相干函数自动导入配置
自动导入 src/**/components 目次下的组件，无需在页面中手动导入组件，添加了路径别名，@ 默认指向 src 目次，导入模块的时候可以直接使用 import xxx from "@/xxx/xxx" 形式

1. // vite.config.js
2. import { defineConfig } from "vite";
3. import vue from "@vitejs/plugin-vue";
4. import AutoImport from "unplugin-auto-import/vite";
5. import Components from "unplugin-vue-components/vite";
6. import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
7. import { resolve } from "path";
9. const pathSrc = resolve(__dirname, "src");
11. export default defineConfig({
12.   plugins: [
13.     vue(),
14.     // 自动导入
15.     AutoImport({
16.       // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
17.       imports: ["vue", "vue-router", "@vueuse/core"],
18.       resolvers: [
19.         // 自动导入 Element Plus 相关函数
20.         ElementPlusResolver(),
21.       ],
22.       eslintrc: {
23.         enabled: true, // 解决 Eslint 提示 no-undef 错误
24.       },
25.       // 配置文件位置 (false:关闭自动生成)
26.       dts: resolve(__dirname, "src/types/auto-imports.d.ts"),
27.     }),
28.     Components({
29.       resolvers: [
30.         // 自动导入 Element Plus 组件
31.         ElementPlusResolver(),
32.       ],
33.       // 指定自定义组件位置(默认:src/components)
34.       dirs: ["src/**/components"],
35.       // 配置文件位置 (false:关闭自动生成)
36.       dts: resolve(__dirname, "src/types/components.d.ts"),
37.     }),
38.   ],
39.   resolve: {
40.     // 导入文件时省略文件扩展名
41.     extensions: [".js", ".ts", ".vue", ".json", "es"],
42.     // 配置路径别名
43.     alias: { "@": pathSrc },
44.   },
45.   // ...
46. });

复制代码

删除 src/main.js 文件中之前引入的 Element Plus 的代码

1. // src/main.js
2. import { createApp } from "vue";
3. // import ElementPlus from "element-plus";  // 删除
4. import router from "./router";
5. import pinia from "./store";
6. // import "element-plus/dist/index.css";  // 删除
7. import App from "./App.vue";
9. const app = createApp(App);
10. app.use(router);
11. app.use(pinia);
12. // app.use(ElementPlus); // 删除
13. app.mount("#app");

复制代码

删除 src/views/login/index.vue 中的 import { ElMessage } from "element-plus"; 代码，现在全部与 Element Plus 相干的代码都被自动导入了，无需再手动引入。
修改 .eslintrc.cjs 文件中 extends 项，添加 ".eslintrc-auto-import.json" 配置，办理 Eslint 提示 no-undef 错误

1. # ...
2. extends: [
3. # ...
4.   ".eslintrc-auto-import.json", # 解决 Eslint 提示 no-undef 错误
5. ]
6. # ...

复制代码

按需导入 Echarts 图表库

在 src/utils 文件夹下创建 echarts.js 文件，把必要用到的图表组件导入到该文件中，在必要使用 Echarts 的地方直接导入该文件，这样就可以按需导入 Echarts 图表库了

1. // src/utils/echarts.js
3. // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
4. import * as echarts from "echarts/core";
5. // 引入柱状图图表，图表后缀都为 Chart
6. import { BarChart } from "echarts/charts";
7. // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
8. import {
9.   TitleComponent,
10.   TooltipComponent,
11.   GridComponent,
12.   DatasetComponent,
13.   TransformComponent,
14. } from "echarts/components";
15. // 标签自动布局、全局过渡动画等特性
16. import { LabelLayout, UniversalTransition } from "echarts/features";
17. // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
18. import { CanvasRenderer } from "echarts/renderers";
20. // 注册必须的组件
21. echarts.use([
22.   TitleComponent,
23.   TooltipComponent,
24.   GridComponent,
25.   DatasetComponent,
26.   TransformComponent,
27.   BarChart,
28.   LabelLayout,
29.   UniversalTransition,
30.   CanvasRenderer,
31. ]);
33. export default echarts;

复制代码

修改 src/views/dashboard/index.vue 文件，引入 src/utils/echarts.js 文件，这样就可以按需导入 Echarts 图表库了

1. // import * as echarts from "echarts"; // 删除
2. import echarts from "@/utils/echarts"; // 新增
3. // ...

复制代码

打包静态资源优化

1. #安装插件
2. npm install terser -D

复制代码

修改 vite.config.js 文件，添加了 terser 配置，打包时会自动压缩 js 文件，配置了 build.rollupOptions 将打包后的静态资源按文件范例举行分类

1. import { defineConfig } from "vite";
2. // ...
4. export default defineConfig({
5. // ...
6.   // 预览模式配置
7.   preview: {
8.     port: 8081,
9.     open: true,
10.   },
11.   // 开发模式配置
12.   server: {
13.     https: false, // 是否开启 https
14.     port: 8080, // 端口号
15.     host: "0.0.0.0", // 监听所有地址
16.     open: true, // 服务启动时是否自动打开浏览器
17.     cors: true, // 允许跨域
18.     proxy: {}, // 自定义代理规则
19.   },
20.   // 构建配置
21.   build: {
22.     chunkSizeWarningLimit: 2000, // 消除打包大小超过500kb警告
23.     minify: "terser", // Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效
24.     terserOptions: {
25.       compress: {
26.         keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
27.         drop_console: true, // 生产环境去除 console
28.         drop_debugger: true, // 生产环境去除 debugger
29.       },
30.       format: {
31.         comments: false, // 删除注释
32.       },
33.     },
34.     rollupOptions: {
35.       output: {
36.         // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
37.         entryFileNames: "js/[name].[hash].js",
38.         // 用于命名代码拆分时创建的共享块的输出命名
39.         chunkFileNames: "js/[name].[hash].js",
40.         // 用于输出静态资源的命名，[ext]表示文件扩展名
41.         assetFileNames: (assetInfo) => {
42.           const info = assetInfo.name.split(".");
43.           let extType = info[info.length - 1];
44.           // console.log('文件信息', assetInfo.name)
45.           if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)) {
46.             extType = "media";
47.           } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
48.             extType = "img";
49.           } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
50.             extType = "fonts";
51.           }
52.           return `${extType}/[name].[hash].[ext]`;
53.         },
54.       },
55.     },
56.   },
57. });

复制代码

开启 Gzip 压缩

1. #安装插件
2. npm install vite-plugin-compression -D

复制代码

修改 vite.config.js 文件，添加了 vite-plugin-compression 插件

1. import { defineConfig } from "vite";
2. // ...
3. import viteCompression from "vite-plugin-compression";
6. export default defineConfig({
7.   plugins: [
8.     // ...
9.     viteCompression(),
10.   ],
11. // ...
12. });

复制代码

在 Vite 构建项目时开启 Gzip 压缩后，为了确保 Nginx 能够精确处置惩罚并返回 Gzip 压缩后的文件，你必要在 Nginx 服务器上举行相应的配置

1. http {
2.     gzip on;
3.     gzip_static on; # 开启静态gzip功能，优先返回预压缩的.gz文件
4.     server {
5.         listen 8080;
6.         server_name localhost;
7.         location / {
8.               root /usr/share/nginx/html/dist; # 替换为你的实际项目部署目录
9.               index  index.html index.htm;
10.               try_files $uri $uri/ /index.html;
11.               # 指定如果存在预压缩文件，则优先返回 .gz 文件
12.               gzip_static always;
13.         }
14.         error_page   500 502 503 504  /50x.html;
15.         location = /50x.html {
16.             root   html;
17.         }
18.     }
19. }

复制代码

在这个配置中，Nginx会在接收到请求时首先查找是否存在对应的.gz预压缩文件，假如存在则直接返回该文件，否则会返回原始未压缩的文件。
确保Vite构建时生成的预压缩文件与原始文件位于同一目次下，并且命名规范遵循Nginx的预期（即与原始文件同名，但扩展名为.gz）。同时，在重启Nginx服务后使新配置生效。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。