本篇博客针对新vue2
项目,老项目就先不说了哈哈(坑太多)
首先新建一个vue2
项目
vue create simple-vue2-vite
选择Default ([Vue 2] babel, eslint)
success Saved lockfile.
Done in 3.92s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project simple-vue2-vite.
👉 Get started with the following commands:
$ cd simple-vue2-vite
$ yarn serve
安装完毕后我们进入,执行
cd simple-vue2-vite
yarn serve
可以看到正常运行:
我们首先安装vite
pnpm i -D vite vite-plugin-vue2
根目录新建一个vite.config.js
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
export default defineConfig({
plugins: [
createVuePlugin({
jsx: true
})
]
})
然后把public
目录里的index.html
放到外面根目录
进入index.html
,加上script
<script type="module" src="/src/main.js"></script>
然后去掉或者更改所有的<%= %>
格式
最后效果:
<!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>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
启动
vite --port 3004
成功: