重要提醒！！！项目是vue@2.7版本，需要安装@vitejs/plugin-vue2，2.7之前的版本安装vite-plugin-vue2
一、package.json修改与vite相关插件安装，index.html中加入
<script type="module" src="../src/main.js"></script>
```1、先加上启动命令
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"deploy": "npx deploy",
"vite": "vite" //这个就是新增的vite启动命令
},
2、安装vite相关插件
npm i vite vite-plugin-html @vitejs/plugin-vue2 vite-plugin-require-transform @originjs/vite-plugin-commonjs //一共是五个插件
安装完之后的package.json中就会多了五个插件：
"vite": "^4.5.0",
"vite-plugin-html": "^3.2.0",
"@vitejs/plugin-vue2": "^2.2.0",```
"vite-plugin-require-transform": "^1.0.21",
"@originjs/vite-plugin-commonjs": "^1.0.3",
二、在根目录新建vite.config.js文件
vite.config.js内容如下：
```
import { defineConfig } from 'vite'
import createVitePlugin from '@vitejs/plugin-vue2'
import { createHtmlPlugin } from "vite-plugin-html"
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
import path from "path"
export default defineConfig({
server: {
host: '0.0.0.0',
port: 8080,
// 是否开启 https
https: false,
proxy: {
'/pkulaw': {
target: 'http://192.168.0.217:37000', //测试环境
changeOrigin: true, //是否跨域
ws: true
},
}
},
plugins: [
requireTransform({
fileRegex: /.js$|.vue$/
}),
createVitePlugin(),
createHtmlPlugin({
minify: true,
/**
* 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
* @default src/main.ts
*/
entry: '/src/main.js',
/**
* 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置
* @default index.html
*/
template: '/public/index.html', //设置项目入口的html，开发、打包都执行此路径
}),
viteCommonjs({
skipPreBuild: true
}),
],
resolve: {
alias: {
"@": path.resolve("./src")
},
/** 暂时先加.vue, .js, .json */
extensions: [".vue", ".js", ".json"],
}
})
```
三、关于vite不支持require的问题（不考虑插件的情况下，第一条中已通过插件解决此问题，本处只是简单提一下不使用插件的情况下手动如何解决）
1、具体哪里用到require不支持可自行百度；
2、本项目中讲公用组件注册为全局组件的时候有用到require，遂进行了改造，改造前后的代码以及截图仅供参考
```//export default { //webpack版本注册全局组件
// install(Vue) {
// /* 函数 */
// var requireComponent = require.context('./', true, /\.vue$/)
// requireComponent.keys().forEach((item) => {
// /* moduleDefault===相当于 import PageTools from "@/components/PageTools"; */
// var moduleDefault = requireComponent(item).default
// //console.log(moduleDefault, 88);
// Vue.component(moduleDefault.name, moduleDefault)
// })
// }
//}
//vite版本注册全局组件
import {defineAsyncComponent } from 'vue'
export default {
install(app){
const components = import.meta.glob('./*/*.vue')
console.log(components)
for(const [key,value] of Object.entries(components)){
const componentName = key.replace('./','').split('/')[0]
app.component(componentName,defineAsyncComponent(value))
}
}
}
```
