vite搭建vue2项目以及遇到问题解决方案

wenjing:)

已于 2024-03-29 17:27:49 修改

阅读量510

点赞数 5

分类专栏：前端文章标签： vue.js 前端 javascript

于 2024-03-29 17:27:12 首次发布

本文链接：https://blog.csdn.net/weixin_43336525/article/details/137147698

版权

5 篇文章 0 订阅

订阅专栏

话不多说直接开始搭建

1.初始化vite项目

进入文件夹，在终端输入：

npm init vite@latest

第一次使用 Vite 时会询问你是否继续，回复 y ，后续搭建不会出现

Ok to proceed?(y)

在这里插入图片描述
如果选择Vue默认是Vue3，我们需要搭建Vue2项目，选择vanilla回车，然后根据我们的需求选择js开发或者ts开发，回车

Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
>   JavaScript

项目创建成功会出现三条命令：
在这里插入图片描述
我们分别执行这几条命令，项目成功启动

npm install vite-plugin-vue2 --dev

但是这时候会报错：
在这里插入图片描述
第一种解决方案参考自：https://blog.csdn.net/TIAN20121221/article/details/117173319

// 不报错方案：
npm install vite-plugin-vue2 --dev --legacy-peer-deps

在这里插入图片描述
第二种解决方案是运行：

yarn add vite-plugin-vue2 --dev

解决上述问题后，在根目录下新建 vite.config.js 文件，其内容如下：

import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [createVuePlugin()]
}

这里一定要注意！！！

1.我们需要指定vue版本号，如果我们不指定，默认安装的是vue3
2.vue和vue-template-compiler版本号需要一致，如果不一致编译时会报错！下图所示

在这里插入图片描述
正确命令：

npm install vue@2.6.14  vue-template-compiler@2.6.14 --legacy-peer-deps

1.在根目录下新建 src 文件夹，并且在src文件夹中新建main.js（可以把根目录下的main.js删除），其内容如下：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

2.在src中新建App.vue，输入你的内容

<template>
  <div>hello</div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  components: {},
}
</script>

3.修改根目录index.html文件中js文件的指向，将之前指向根目录main.js的路径改成src中的index.js

<body>
   <div id="app"></div>
   <script type="module" src="./src/main.js"></script>
</body>

4.最后运行程序

npm run dev

成功运行！
在这里插入图片描述

关注

专栏目录