注意：在 Vite创建项目 中讲到，Vite 官方对 Vue 企业网站定制开发的支持只针对于Vue3.x 版本，而对于 Vue2.x 企业网站定制开发是不支持的。使 Vite 支持 Vue2.x，是需要安装插件来实现
1.使用vite创建基础项目
这里我使用的是npm（个人常用npm，无关其他）：
$ npm create vite@latest- 1
2.输入项目名
按个人需求取即可，我这里随便叫一个吧
? Project name: vue2- 1
3.选择框架
? Select a framework: » - Use arrow-keys. Return to submit.> vanilla // 原生js vue // vue3 react // react preact // 轻量化react框架 lit // 轻量级web组件 svelte // svelte框架- 1
- 2
- 3
- 4
- 5
- 6
- 7
这里需要选择的是vanilla，因为选择vue直接创建的就是
? Select a variant: >>Use arrow-keys. Return to submint.> vanilla vanilla-ts- 1
- 2
- 3
如果你要用的话就选着vanilla-ts
4.进入项目安装vue2插件
$ cd vue2$ npm install$ npm install vite-plugin-vue2 -D- 1
- 2
- 3
- 4
- 5
新建vite.config.js文件
// vite.config.jsimport { createVuePlugin } from 'vite-plugin-vue2'export default { plugins: [ createVuePlugin(/* options */) ],}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
5.安装vue
由于直接npm install vue安装的是最新的vue，即vue3，所以在安装vue的时候需要带上你所需的版本号，这里我用的是v2.6.14
$ npm install vue@2.6.14 -S- 1
6.修改项目结构
- 创建src文件夹
- 将 main.js 移入src 文件夹中，并修改：
// main.jsimport Vue from "vue";import App from "./App.vue"new Vue({ el: "#app", render: (h) => h(App)}).$mount();- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 修改
index.html中对main.js的引用路径：<script type="module" src="/src/main.js"></script> - 在src文件中创建
App.vue，并修改：
<template> <div>Vue 2</div></template>- 1
- 2
- 3
7.启动项目
- 进入项目：
cd vue2 - 安装依赖：
npm install - 运行项目：
npm run dev或npx vite - 打包项目：
npm run build或npx vite build
结果
2022/5/18更新