Vue3默认支持OptionsAPI和Composition API 混编的方式进行开发,如果在新系统建设过程中完全抛弃了OptionsAPI方式,可以使用vite定义全局变量来告诉Vue关闭对OptionsAPI的响应。
本教程基于Vite进行部署的引用系统,如果是npm进行包管理和调试的,请参考其他教程
测试环境:
"dependencies": {
"@vicons/antd": "^0.12.0",
"axios": "^0.26.1",
"less": "^4.1.2",
"less-loader": "^10.2.0",
"naive-ui": "^2.26.3",
"vue": "^3.2.25",
"vue-router": "4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.2.0",
"vite": "^2.8.0"
}
1/N
1、在项目根目录编辑vite.config,js,如果没有请新建,配置文件的格式和内容请参考官方,Vite配置文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
"coms": path.resolve(__dirname, "src/components"),
},
},
define: {
__VUE_OPTIONS_API__: false,
},
server: {
host: "127.0.0.1",
port: 8000,
autoOpenBrowser: true,
https: true,
},
})
2、 如何验证已经正确关闭__VUE_OPTIONS_API__
在JS中触发某个函数,打印JS作用域下的__VUE_OPTIONS_API__,获取其值,如果为设置的值false即已经关闭,vite中的define作用域为全局。
router.beforeEach((to, from, next) => {
console.log('@Jump to', to.name);
var token = window.sessionStorage.getItem('token');
console.log(__VUE_OPTIONS_API__)
if (!token) {
if (to.name !== "login") {
next({ name: 'login' })
} else {
next()
}
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)