首先，进入vite官网，按照官网提示npm init vite@latest创建一个vite+vue3的项目，看一下和想在项目有什么区别。
第二步、照着模样来一份：
1、复制他的vite.config.js,到我的根目录下。
2、同时，他上面有@vitejs/plugin-vue vite两个包，那我也copy:npm install vite @vitejs/plugin-vue --save-dev。结果安装就报错了，看这意思是不支持vue2
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: test@0.1.0
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR! vue@"^2.5.17" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.2.25" from @vitejs/plugin-vue@2.1.0
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR! @vitejs/plugin-vue@"*" from the root project
百度发现也有类似问题，用vite-plugin-vue2替换@vitejs/plugin-vue,安装成功,改一下配置：
/* vite.config.js */
import { defineConfig } from 'vite'
// import vue from '@vitejs/plugin-vue' // vue3
import { createVuePlugin as vue } from 'vite-plugin-vue2'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
3、vite项目index.html需要放到根目录下，好的，我在原项目复制一份public/index.html，复制到根目录，同时给新的inde.html加上<script type="module" src="/src/main.js"></script>
4、试着运行下看看npx vite，报错：
error when starting dev server:
Error: The following dependencies are imported but could not be resolved:
@/style/.....
@/components/....
...
是@别名没设置，加上
/* vite.config.js */
import { defineConfig } from 'vite'
// import vue from '@vitejs/plugin-vue' // vue3
import { createVuePlugin as vue } from 'vite-plugin-vue2'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
})
5、再次npx vite:
vite v2.7.2 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
去浏览器看看，报错了：
[plugin:vite:css] Can't find stylesheet to import.
╷
7 │ @import "~element-ui/packages/theme-chalk/src/index";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\styles\element-variables.scss 7:9 root stylesheet
又是别名问题
import { defineConfig } from 'vite'
// import vue from '@vitejs/plugin-vue' // vue3
import { createVuePlugin as vue } from 'vite-plugin-vue2'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [
{
find: /^@(.*)$/,
replacement: ($0, $1) => {
return path.join(__dirname, 'src', $1)
// return /^vite/.test($1) ? $0 : path.join(__dirname, 'src', $1)
}
},
{
// this is required for the SCSS modules
find: /^~(.*)$/,
replacement: '$1',
}
]
}
})
6、加上对~的处理后，浏览器报错：GET http://localhost:3000/src/App net::ERR_ABORTED 404 (Not Found),是文件后缀的问题，没去找App.vue,加上，不过官网不建议省略后缀
extensions: ['.js', '.vue', '.scss', '.css', '.json']
7、改完之后，浏览器又报错了：GET http://localhost:3000/src/main.js net::ERR_ABORTED 403 (Forbidden)，同时命令行也报错The request url "D:\...\src\main.js" is outside of Vite serving allow list.意思是vite没有权限处理外面的文件夹中的文件，查看官网后，添加server.fs.allow,配置如下：
import { defineConfig, searchForWorkspaceRoot } from 'vite'
// import vue from '@vitejs/plugin-vue' // vue3
import { createVuePlugin as vue } from 'vite-plugin-vue2'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [
{
find: /^@(.*)$/,
replacement: ($0, $1) => {
return path.join(__dirname, 'src', $1)
// return /^vite/.test($1) ? $0 : path.join(__dirname, 'src', $1)
}
},
{
// this is required for the SCSS modules
find: /^~(.*)$/,
replacement: '$1',
}
],
extensions: ['.js', '.vue', '.scss', '.css', '.json'],
server: {
port: 8087,
fs: {
allow: [searchForWorkspaceRoot(process.cwd())]
}
}
}
})
8、重启本地服务器，原先的报错没了，多了一个Uncaught ReferenceError: process is not defined，加上define.process.env：
import { defineConfig, searchForWorkspaceRoot } from 'vite'
// import vue from '@vitejs/plugin-vue' // vue3
import { createVuePlugin as vue } from 'vite-plugin-vue2'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
define: {
'process.env': {
NODE_ENV: 'development'
}
},
plugins: [vue()],
resolve: {
alias: [
{
find: /^@(.*)$/,
replacement: ($0, $1) => {
return path.join(__dirname, 'src', $1)
// return /^vite/.test($1) ? $0 : path.join(__dirname, 'src', $1)
}
},
{
// this is required for the SCSS modules
find: /^~(.*)$/,
replacement: '$1',
}
],
extensions: ['.js', '.vue', '.scss', '.css', '.json']
},
server: {
port: 8087,
fs: {
allow: [searchForWorkspaceRoot(process.cwd())]
}
}
})
9、坑已经填的差不多了，后面浏览器报错还有require的使用问题，vite不支持require，只能手动改为import img from './img/a.png'或者import('./img/a.png')形式
10、中间我还遇到浏览器报错localhost:3000/@id/@vite/env 404，百度谷歌都搜索了，没有这方面的解决办法，折磨了我一天，后来吧vite降级到2.7.2,问题解决了...以后遇到这样的问题，还需要考虑下node版本和npm包版本的问题
