Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report]: 修改代码后刷新浏览器修改后的内容会失效 #1873

Open
cordmaker opened this issue Oct 24, 2024 · 1 comment
Open

Comments

@cordmaker
Copy link

Steps to reproduce

创建一个 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>

Reproduce link

No response

What is actually happening?

如上所述

System Info

"@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",
@ErKeLost
Copy link
Member

可以先试试 js的 sass 插件

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants