vue升级2.7,关联vite升级
vue-template-compiler@2.6.10 需要升级到2.7.16
vite-plugin-vue2 替换为 @vitejs/plugin-vue2
vite.createFilter is not a function
需要升级vite到3.x版本,这个错误是vite与插件不兼容,查看@vitejs/plugin-vue2源码发现,引入了vite3.0
Error in render: “ReferenceError: React is not defined”
需要安装@vitejs/plugin-vue-jsx
使用vue this, vuex等
import { getCurrentInstance } from ‘vue’
// 访问vuex
export const useStore = () => {
const vm = getCurrentInstance()
if (!vm) throw new Error(‘must be called in setup’)
console.log(‘vm–’, vm);
return vm.proxy.$store
}
// 访问this
export const useCtx = () => {
const vm = getCurrentInstance()
if (!vm) throw new Error(‘must be called in setup’)
return vm.proxy;
}
增加vite开发环境
README.md
新增vite dev环境
渐进升级,不影响原使用,目前保留vue-cli-service和vite共存
node v14.8以上(我使用了v16)
切换版本后需要删除node_module报包重新执行 npm install
本地
npm run dev-vite
其他说明
css尽量别使用 module 这个名称,会报这么个错误,待排查
1 | [vite] Internal server error: Unexpected token (1:0) |
babel.config.js
1 | var npmEvent = process.env.npm_lifecycle_event; |
package.json 增加脚本
1 | "dev-vite": "vite", |
main.js
1 | if (process.env.VITE) { |
// vite显示svg需要引入这个,但是在vue-cli里面引入报错,待TODO
index.html
修改main.js为 type=”module”
vite.config.js
1 | import { defineConfig } from "vite"; |