2022年11月，折腾了一早上，才用vite搭好了vue2项目，踩的坑，全记在了这篇实战里，看完，能帮你省下半天时间。
初始化项目选对版本是关键
npm init vite@2.8.0
很多人通过直接运用vite create vue来创建项目，所得到的是vue3版本，若想搭建vue2则必须转换思路。在我实际进行操作时，所使用的是vite 2.8.0版本，借助npm create vite@2.8.0 my-project -- --template vanilla来创建原生项目。在此特别需要提醒的是，并非要去追逐最新版vite，因为我曾尝试使用新版进行创建，结果后续配置出现报错，致使困扰了我二十分钟。
// 1.进入项目 cd vite-vue2 // 2.安装依赖 npm install // 3.启动项目 npm run dev
项目骨架生成完毕后，首要之事便是对结构予以调整，于根目录构建src文件夹，之后将main.js移入其中，index.html需对入口文件路径加以修改，把script标签的src指向/src/main.js，完成这一步骤后，项目的基础架子已然搭建妥当，前前后后总共耗费了不到五分钟的时间。
插件安装与版本锁定不能马虎
// 注意：vite-plugin-vue2的版本为1.9.3 npm install vite-plugin-vue2@1.9.3 -D
构建工具vite针对vue2的支持，完全依赖于@vitejs/plugin-vue2此插件。npm install @vitejs/plugin-vue2 -D乃是其安装指令。完成安装后，于根目录创建vite.config.js文件，录入import { defineConfig } from 'vite'，以及import vue from '@vitejs/plugin-vue2'，随后凭借plugins: [vue()]进行注册。
import { defineConfig } from 'vite' // 动态配置函数
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'
export default () =>
defineConfig({
plugins: [createVuePlugin()],
server: {
open: true, //自动打开浏览器
port: 1567 //端口号
},
resolve: {
// 别名
alias: [
{
find: '@',
replacement: '/src'
}
]
}
})
当时我没指定版本直接用npm install vue命令，结果给我安装了vue3.2.0，导致使用该版本npm install vue必须将版本锁定在2.x才能让项目正常运行，不然项目跑起来就都会出现报错。正确的做法是使用npm install vue@2.6.14进行安装。建议安装完成后立刻检查package.json，要保证vue版本是以2开头，否则之后回头排查问题会非常费劲。
npm install vue@2.x vue-template-compiler@2.x -S
路由配置分模块管理更清晰
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
需要在安装vue-router时指定版本，即通过命令npm install vue-router@3.5.2 -S来进行安装。vue2所对应的是路由3.x版本，要是安装成4.x版本就会直接出现报错情况。要在src下面创建router文件夹，在该文件夹里面放置index.js作为主入口。秉持习惯上的做法，会将路由表进行拆分放置，创建modules文件夹，其中home.js和user.js各自管理一部分，最终借助concat进行合并导出。
// index.html
将页面组件放置于views目录之中，举例而言，构建views/home/Index.vue，撰写一个最为简单的template用以进行测试，在main.js里引入路由，即import router from './router'，接着运用Vue.use(router)，于App.vue里添加router-view标签，当这一系列流程全部完成之后，页面跳转便畅通无阻了。
Hello Vite Vue2
状态管理按需引入不臃肿
npm run dev
按照同样的锁版本方式安装vuex：通过npm install vuex@3.6 .2 -S来进行。对于小项目而言实际上是可以不使用的，但是我这个用于练习的项目随后存在组件通信方面的需求，所以还是将其添加进去了。在src下面创建store目录，在index.js里面写入Vue.use(Vuex)，接着export default new Vuex.Store({})，先在state中放置若干测试数据。
在main.js之中导入store，而后将其挂载到根实例之上，如此一来所有组件均可通过this.$store进行访问，vuex配置自身并不复杂，十分钟便能够完成搞定，要是项目规模较小，建议评估一下是否真的存在必要，以此避免代码出现臃肿情况。
npm install vue-router@3.5.2 -S
组件库按需引入节省体积
源于ant - design - vue 1.x版本具备与vue2的兼容性，其安装命令为npm install ant - design - vue@1.7.8，官方文档表明进行按需引入时需配置babel - plugin - import，然而经本人一番折腾后发觉在vite环境下无需如此繁琐，可直接于src目录下创建plugin/antd.js文件，在其中按需import所需组件，诸如Button、Table等，随后通过Vue.component进行注册。
// /src/router/module/home.js
export const home = [
{
path: '/home',
meta: { title: '首页' },
component: () => import('@/views/home/Index.vue')
}
]
在main.js之中，通过import './plugin/antd'这种操作，便达成了全局注册的相关事宜。于页面里面，直接书写a-button就能够予以使用该功能了。一旦进行按需引入的操作，那么打包体积会显著减小，经过实际测量，从原本的1.2MB下降至大约800KB的程度。在组件库这一方面，投入的时间是最长的，原因是网络上的资料大部分呈现的是vue3+vite的配置方式这个情况。
// /src/router/module/index.js
import { home } from './home'
export const module = [...home]
网络请求封装统一管理接口
// /src/router下index.js
import { module } from './module/index'
import VueRouter from 'vue-router'
import Vue from 'vue'
// 使用VueRouter
Vue.use(VueRouter)
const routes = [
...module
]
const router = new VueRouter({
mode: 'history',
base: '/',
routes
})
export default router
Axios进行安装时，采取使用npm install axios的方式。于src范围内创建http目录，将request.js用于开展基础配置。设置baseURL，设定超时时间，在请求拦截器中添加token，并针对响应拦截器处理错误码。此后按照业务模块来拆分接口文件，像是在home.js当中export各个API函数。
Home
调用页面时，从'@/http/home'导入{getUserInfo}，通过async await获取数据。封装之后，代码变得整洁许多，更改接口域名之地需要更改一处。我习惯为每个接口单独try catch，如此错误提示更加精准。完成这一步后，整个项目的工程化骨架便完整了。
搭建老项目使用vite之际，你所遇到格外头疼的兼容性问题究竟是什么呢？欢迎于评论区去分享个人的踩坑经历，若感觉文章具备用处，那就点出一个赞来进行支持一番。
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Comments NOTHING