vite+vue2 的学习与问题记录

描述

按照博文[https://juejin.cn/post/6988808776291713060]指导步骤执行完成。

问题记录

运行npm run dev 控制台显示

failed to load config from /Users/study-vite-vue/study-vite-vue2/vite.config.js
error when starting dev server:
Error: 

Vue packages version mismatch:

- [email protected] (/Users/study-vite-vue/study-vite-vue2/node_modules/vue/index.js)
- [email protected] (/Users/study-vite-vue/study-vite-vue2/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

1、安装vue-loader，默认最新版本"vue-loader": "^17.0.0",

2、根据提示simply update vue-template-compiler ,安装vue-template-compiler

3、由于安装vue时被默认安装了vue3的版本，更改vue版本为[email protected]即可

4、npm run dev 执行package.json 的"dev":"vite" ，浏览器访问。

Local:   http://localhost:5173/
Network: http://192.168.0.116:5173/
Network: http://10.22.33.197:5173/

5、在浏览器运行地址，控制台报错globalThis is not defined at overlay.ts:120 ，在index.html中加入以下脚本

<script> this.globalThis || (this.globalThis = this) </script>

学习文档：[https://juejin.cn/post/6988808776291713060]

辅助记忆记录

1、新进文件夹study-vite-vue，在终端运行打开

npm init vite@latest
-> Ok to proceed?(y) y
->Project name: study-vite-vue2
-> vanilla // 回车二选此项

成功
cd study-vite-vue2
npm install
npm run dev

npm install vite-plugin-vue2 --dev

2、新建vite.config.js文件，内容如下

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

export default {
  plugins: [createVuePlugin()]
}

3、安装vue相关依赖

npm install vue
npm install vue-template-compiler

4、新建src文件夹，内含main.js 、App.vue文件，内容与Vue项目构建的一致。

5、安装npm install vue-router

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue-router.js?v=e2368834' does not provide an export named 'default'

有人说将import VueRouter from 'vue-router' 改成 import * as VueRouter from 'vue-router' 控制台更换错误信息为VueRouter is not a constructor

"vite": "^3.0.7" 而默认安装的vue-router是4.x的版本，将vue-router降版，安装与vite版本一致再运行即可。

"vue-router": "^3.0.7",
"vite": "^3.0.7"

6、安装npm install vuex —save

=> this.$store.getters.count;
Error in render: "TypeError: Cannot read property 'getters' of undefined"

此处报错原因是安装vuex为默认最新版本4.x，将其降版即可

"vuex": "^3.1.1"

7、最终运行成功的package.json内容

{
  "name": "study-vite-vue2",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^3.0.7"
  },
  "dependencies": {
    "vite-plugin-vue2": "^2.0.2",
    "vue": "^2.7.10",
    "vue-loader": "^17.0.0",
    "vue-router": "^3.0.7",
    "vue-template-compiler": "^2.7.10",
    "vuex": "^3.1.1"
  }
}