Open cordmaker opened 2 days ago
创建一个 vue3 项目,farm 使用最新正式版,安装 scss 插件,安装 ant-design-vue,在修改代码后,热更新会生效,页面上的内容被正确的替换。但如果刷新浏览器,有几率导致刚刚热更新的内容丢失,页面会恢复到热更新之前的效果。
我改的 .vue 文件中的 scss 代码,不确定修改 script 或 template 中的代码是否会出现该问题,因为这个问题也是不定时出现的。 不过我猜测只有修改 scss 时会有问题,因为 template 中刚添加的 class 类名还在,就是样式丢了。
下面是 farm.config.ts 中的配置:
import path from 'path' import { defineConfig } from '@farmfe/core' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import AutoImportApi from 'unplugin-auto-import/vite' import AutoImportComponents from 'unplugin-vue-components/vite' import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers' export default defineConfig(config => { return { compilation: { comments: false, lazyCompilation: false, sourcemap: config.mode === 'development' ? 'inline' : false, resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, output: { assetsFilename: 'assets/[resourceName].[ext]', filename: 'assets/[resourceName].[ext]', }, runtime: { isolate: true, }, }, plugins: ['@farmfe/plugin-sass'], vitePlugins: [ vue(), vueJsx(), AutoImportApi({ dts: './typings/auto-import-api.d.ts', resolvers: [AntDesignVueResolver()], imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'], }), AutoImportComponents({ dts: './typings/auto-import-comps.d.ts', resolvers: [ AntDesignVueResolver({ importStyle: 'css-in-js', }), ], }), ], } })
出现问题的 .vue 文件中的代码:
<script setup lang="ts"> import { NOT_FOUND_PAGE_NAME } from '@/constant' defineOptions({ name: NOT_FOUND_PAGE_NAME, }) </script> <template> <AResult class="result-comp" status="404" title="404" sub-title="抱歉,您访问的页面不存在或无权限访问" > <template #extra> <AButton type="primary" @click="$router.back">返回</AButton> </template> </AResult> </template> <style scoped lang="scss"> .result-comp { padding: 0; // 启动服务之前注释掉这一行,在服务启动之后解开注释,会发现页面正常显示,手动刷新浏览器后,该样式丢失 } </style>
No response
如上所述
"@farmfe/cli": "^1.0.4", "@farmfe/core": "^1.3.29", "@farmfe/plugin-sass": "^1.1.0", "vue": "^3.5.12", "ant-design-vue": "4.x", "@ant-design/icons-vue": "^7.0.1",
可以先试试 js的 sass 插件
Steps to reproduce
创建一个 vue3 项目,farm 使用最新正式版,安装 scss 插件,安装 ant-design-vue,在修改代码后,热更新会生效,页面上的内容被正确的替换。但如果刷新浏览器,有几率导致刚刚热更新的内容丢失,页面会恢复到热更新之前的效果。
我改的 .vue 文件中的 scss 代码,不确定修改 script 或 template 中的代码是否会出现该问题,因为这个问题也是不定时出现的。 不过我猜测只有修改 scss 时会有问题,因为 template 中刚添加的 class 类名还在,就是样式丢了。
下面是 farm.config.ts 中的配置:
出现问题的 .vue 文件中的代码:
Reproduce link
No response
What is actually happening?
如上所述
System Info