转vue2使用vite
Posted 居无常
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了转vue2使用vite相关的知识，希望对你有一定的参考价值。
随着vite2的发布，vite越来越独立于vue存在，同时借助于vite-plugin-vue2插件，大量vue2的工程也终于可以搭上vite开发的快车。
Step.1：vue/cli生成vue2工程
vue create vite-vue2-demo // ... cd vite-vue2-demo npm i
Step.2: 安装vite和vue2插件
npm i -D vite vite-plugin-vue2
Step.3: 调整index.html目录结构，官方说明
index.html /public -> 根目录下，与package.json同级
Step.4: index.html引入main.js
<body> // ... <div id="app"></div> <script type="module" src="/src/main.js"></script> </body>
Step.5: router文件修改base
const router = new VueRouter({
mode: "history",
// base: process.env.BASE_URL,
base: import.meta.env.BASE_URL,
routes,
});
Step.6: package.json修改serve命令
"script": {
"serve": "vite",
// ...
}
大功告成，执行命令
npm run serve
以上是关于转vue2使用vite的主要内容，如果未能解决你的问题，请参考以下文章