堆栈:
- Vue 3(选项API)
- Vite
- 尾风CSS
上下文:
我已经使用这个应用程序好几个月了。如果我更改了一些次要的东西,比如计算属性或样式,组件会更新,但页面不会。从今天起,突然间,无论发生什么变化,整个应用程序都会在每次保存时重新加载,包括添加一个通过自动格式删除的空白。
新警告:
Component options are wraped by defineComponent() internally to
support intellisense on IDE for backward compatible, but this is
an hacking which lead to this component type inconsistent with
same script code on .js / .ts. Recommended wrap component options
by Vue.extends() or defineComponent(). Or you can configure
experimentalShamefullySupportOptionsApi: true / false in
vueCompilerOptions property in tsconfig / jsconfig to disable
this warning.
这个警告似乎是凭空而来的,除了在最新的Volar relase笔记中提到它之外,我在网上找不到任何关于它的信息。我试过降级到旧版本,然后完全禁用它。这没用。
配置
// vite.config.js
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"),
},
},
});
注意,我使用npm run serve
,它通常是npm run dev
。因为肌肉记忆,我换了它们。这不应该是个问题,但值得注意。
// package.json
{
...
"scripts": {
"serve": "vite --host",
"build": "vite build",
"dev": "vite preview"
},
"dependencies": {
"@headlessui/vue": "^1.4.1",
"@heroicons/vue": "^1.0.4",
"@popperjs/core": "^2.11.0",
"@tailwindcss/forms": "^0.3.3",
"vue": "^3.2.6",
"vue-router": "^4.0.11",
"vuex": "^4.0.2",
"vuex-persist": "^3.1.3"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.6.1",
"@vue/compiler-sfc": "^3.2.6",
"autoprefixer": "^10.3.4",
"postcss": "^8.3.6",
"stylelint-config-recommended": "^6.0.0",
"tailwindcss": "^2.2.15",
"vite": "^2.5.4"
}
}
经过几个小时的调试,我发现昨晚测试剩下的是NODE_ENV=production
。
您可以尝试暂时禁用Volar插件,它不会显示放弃提示
我也遇到了这个问题,然后我禁用了volar插件,这样就不再有这个警告消息了,但我不知道z没有危害
将以下条目添加到项目的jsconfig.json
中,就可以开始了:
"vueCompilerOptions": {
"experimentalShamefullySupportOptionsApi": true
},
我认为这比禁用Volar要好,尤其是如果它对你有用的话,因为这不是一个bug,而是一个新功能。查看更改日志了解更多信息:
https://github.com/johnsoncodehk/volar/blob/master/CHANGELOG.md