vue2中,使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件
vue2中,使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件Vite 官方中文文档——https://cn.vitejs.dev/vite-plugin-vue2包——https://www.npmjs.com/package/vite-plugin-vue2随着vite2的发布,vite越来越独立于vue存在,同时借助于vite-plugin-vue2插件,大量v
·
vue2中,使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件
Vite 官方中文文档——https://cn.vitejs.dev/
vite-plugin-vue2包——https://www.npmjs.com/package/vite-plugin-vue2
随着vite2的发布,vite越来越独立于vue存在,同时借助于vite-plugin-vue2插件,大量vue2的工程也终于可以搭上vite开发的快车。
操作流程如下:
1、vue-cli生成vue2工程
vue create vite-vue2-demo
// ...
cd vite-vue2-demo
npm i
src同层级,生成的vite.config.js
import { createVuePlugin } from "vite-plugin-vue2";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
createVuePlugin(),
],
resolve: {
alias: [
{
find: '@',
replacement: '/src',
},
],
},
});
更多配置可到 https://vitejs.dev/config/#conditional-config 查看。
2、 安装vite和vue2插件
npm i -D vite vite-plugin-vue2
3、调整index.html目录结构,官方说明
index.html
/public -> 根目录下,与package.json同级
4、index.html引入main.js
<body>
// ...
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
5、router文件修改base
const router = new VueRouter({
mode: "history",
// base: process.env.BASE_URL,
base: import.meta.env.BASE_URL,
routes,
});
6、package.json修改serve命令
"script": {
"serve": "vite",
// ...
}
npm i
大功告成,执行命令
npm run serve
更多推荐
已为社区贡献72条内容
所有评论(0)