一篇学会如何使用Vite重构Vue3项目

前言

截止发文时间，篇学vite正式版已经发布快2年时间了，使用vue3也发布到3.2版本了，重构它的篇学周边设施基本上已经齐活了。也是使用时候再次重构下我那个vue3.0的开源项目了。

本篇文章就记录下我的重构重构过程，欢迎各位感兴趣的篇学开发者阅读本文。

环境搭建

1年多前，使用我用Vue Cli 4.5构建的重构此项目，有关此项目的篇学更多细节请移步我的另一篇文章使用Vue3重构Vue2项目。同样的使用，从CLI迁移到Vite仍然是重构在package.json中添加vite的依赖项，在项目中添加它的篇学配置文件。

此次项目构建还加入了volta的使用相关配置，对此感兴趣的重构开发者请移步：强大的JavaScript工具管理器Volta

新增vite相关依赖项

我们打开package.json，找到devDependencies字段，移除CLI相关的依赖，添加vite相关的亿华云依赖，如下所示：

+绿色标识代表新增-红色标识代表移除{

"dependencies": {

- "compression-webpack-plugin": "^5.0.1",

},

"devDependencies": {

+ "@vitejs/plugin-vue": "^3.0.0",

+ "vite": "^3.0.0",

+ "vue-tsc": "^0.38.4",

+ "@types/node": "^18.6.3",

- "sass-loader": "^8.0.2",

- "@vue/cli-plugin-babel": "~4.5.0",

- "@vue/cli-plugin-eslint": "~4.5.0",

- "@vue/cli-plugin-router": "~4.5.0",

- "@vue/cli-plugin-typescript": "~4.5.0",

- "@vue/cli-plugin-vuex": "~4.5.0",

- "@vue/cli-service": "~4.5.0",

- "@vue/compiler-sfc": "^3.0.0-0"

-

}

}

随后，我们找到scripts字段，修改项目的运行与构建命令。

{

"scripts": {

"serve": "vite --open",

"build": "vue-tsc --noEmit && vite build",

"preview": "vite preview"

}

}

vite3.x版本要求node版本必须大于14.18.0，因此我们需要在engines字段中做一下提示，如下所示：

{

"engines": {

"npm": "please-use-yarn",

"yarn": ">= 1.0.0",

"node": ">= 14.18.0"

}

}

除了上述配置外，我们还需要在项目的根目录创建.npmrc文件，写入下述内容：

engine-strict = true

配置完成后，我们执行在终端执行yarn install安装依赖即可。

在上述配置中，我们还强制设置了yarn作为项目的包管理工具，如果项目开发成员使用了npm install则不会开始安装依赖并提示其使用yarn来安装依赖。

添加vite配置文件

在vite中，index.html已经从public文件夹迁移到项目的根目录下了，官方文档对此的解释为：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

有关此变更的详细解释请移步：index.html 与项目根目录

接下来，我们在项目的根目录创建index.html文件（将public目录下的文件删除）

引入静态文件时不需要使用%PUBLIC_URL%​作为占位符，可以直接写/来访问，vite会将其解析到public根目录下通过

</html>

注意：如果你的项目比较复杂，云南idc服务商有多个入口，那么就将index.html文件放到对应入口的根目录下。

最后，我们创建vite.config.ts文件，配置代码如下所示：

设置开发环境的端口号设置路径别名设置打包后base地址以及打包输出目录import { defineConfig } from "vite";

import { resolve } from "path";

import vue from "@vitejs/plugin-vue";

const IS_PRODUCTION = process.env.NODE_ENV === "production";

export default defineConfig({

plugins: [vue()],

server: {

host: true,

port: 8020,

proxy: { }

},

resolve: {

// 设置路径别名

alias: {

"@": resolve(__dirname, "./src"),

"*": resolve("")

}

},

base: IS_PRODUCTION ? "/chat-system" : "./",

define: {

"process.env": { }

},

build: {

outDir: resolve(__dirname, "dist")

}

});

注意：我的项目配置比较简单，它只有一个入口，打包后只会部署到生产环境。如果你的项目较为复杂，也不必太过担心，你的应用场景vite也是支持的，按照文档进行相关的配置就好，如下所示：

自定义构建多页面应用模式环境变量和模式

当你的项目有多个入口时，期望通过不同命令来启动不同项目时，你可以使用yarn的--cwd指令来指定其运行时的工作目录。

例如：你有两个入口，那么就在src目录下创建两个文件夹：**A、B **。A和B中分别有自己的index.html、main.ts以及package.json文件（配置start、build命令，传入不同的高防服务器参数来启动/构建不同入口的项目）

根目录的package.json中你就可以配置启动/构建命令为：

{

"scripts": {

"dev:A": "yarn --cwd ./src/A run start",

"dev:B": "yarn --cwd ./src/B run start",

"build:A": "yarn --cwd ./src/A run build",

"build:B": "yarn --cwd ./src/B run build",

"build": "vue-tsc --noEmit && vite build",

"preview": "vite preview"

},

}

最后，我们以A入口为例，列举下package.json文件中的配置：

{

"name": "A",

"version": "1.0.0",

"main": "index.js",

"license": "MIT",

"scripts": {

"start": "vite serve --config ../../vite.config-A.ts --mode development",

"build": "vue-tsc --noEmit && vite build --config ../../vite.config-A.ts --mode production"

}

}升级Vue周边依赖项

vue3.2的单文件组件引入了setup规范，它可以让代码变得更简洁，可以使用纯 TypeScript 声明 props 和抛出事件，有着更好的运行时性能。这些优点让我有了升级vue版本的动力，之前的3.0版本写起来很臃肿，需要return一大堆东西，甚是麻烦。

打开package.json文件作出下述变动：

更新了vue、router、vuex的版本号新增了vueuse包，这是一个基于 Composition API 的实用函数集合，封装了一些常用的功能（实时获取鼠标位置、防抖、节流、获取客户端系统主题等），可以避免一些重复性的工作内容，大大提升开发效率。{

"dependencies": {

- "vue": "^3.0.0-0",

- "vue-class-component": "^8.0.0-0"

- "vue-router": "^4.0.0-0",

- "vuex": "^4.0.0-0",

+ "vue": "^3.2.37",

+ "vue-router": "^4.1.3",

+ "vuex": "^4.0.2",

+ "@vueuse/components": "^8.9.2",

+ "@vueuse/core": "^8.9.2"

}

}

最后执行yarn install即可完成整个环境的搭建，本章节重构完成后的完整文件请移步：

.npmrcindex.htmlpackage.jsonvite.config.ts经验分享

本章节就跟大家分享下，我切到新环境后做的一些优化点以及遇到的问题和解决方案。

本章节修改到的文件，完整文件代码如下：

package.jsontsconfig.jsonrequire不存在

一切准备就绪后，按下了项目启动按钮，很快啊，651ms项目就启动了，不愧是vite速度就是快，嘴角疯狂上扬。

浏览器加载完项目后，我傻眼了，我的登陆界面呢