记录一次Vue项目搭建在个人开发的Vue项目中，之前还是采用vue-cli进行构建的。但由于项目体量变大，开发环境启动项

在个人开发的Vue项目中，之前还是采用vue-cli进行构建的。但由于项目体量变大，开发环境启动项目需要比较久的时间故决定引入Vite进行开发环境构建。

项目情况

基于vue-cli脚手架搭建，整体技术栈为Vue3 + ts

安装

运行命令安装Vite和相关插件(根据项目情况配置，可以在Vite文档上查看)，因为Vite只用于开发环境构建，所以放在devDependencies下。

yarn add vite vite-plugin-eslint @vitejs/plugin-vue --dev

配置

在项目的根目录下，创建vite.config.ts文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin() //eslint插件
  ]
})

然后在package.json中添加上启动命令即可使用Vite

...
"scripts": {
    "dev": "vite"
},
...

不过我们现在直接启用服务是看不到页面的，还需要在项目的根目录添加index.html,至于为什么是根目录可以看一下文档中的解释(index.html 与项目根目录), 由于Vite通过ESM的方式加载模块，index.html结构与vue-cli的模板html文件也有所不同故不能使用同一个。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>title</title>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

踩坑记录

环境变量问题

启动项目后，并没有出现页面，打开控制台后发现是环境变量导致的。

与vue-cli不同的是，Vite通过import.meta.env对象暴露环境变量，所以访问不到process对象。为了与vue-cli一致，这里我引入了dotenv这个包，在vite.config,ts文件中读取环境变量文件，并通过define配置将process.env暴露到项目文件中。

...
const path = require('path')
const dotenv = require('dotenv')

const { parsed: envConfig } = dotenv.config({ path: path.resolve(process.cwd(), '.env.development') })


// https://vitejs.dev/config/
export default defineConfig({
    //...省略配置
  define: {
    'process.env': envConfig
  }
})

其它问题暂时还没有遇到，后续可能会在补充。

写在最后

使用Vite进行开发真的极大改善了开发体验，本来想着生产模式也迁移到Vite，但考虑到浏览器兼容性问题，还是选择vue-cli进行构建。

如果在文章中有出错的地方，欢迎大家指出。