uni-app 【报Bug】vue3 css 全局样式引入 开发正常 发布后 样式全部丢失无效

uni-app 【报Bug】vue3 css 全局样式引入 开发正常 发布后 样式全部丢失无效

示例代码：

<script>
export default {
onLaunch: function() {
// console.log('App Launch')
this.$store.commit('initUser')
},
onShow: function() {
// console.log('App Show')
},
onHide: function() {
// console.log('App Hide')
}
}
</script>  
<style lang="scss">
@import './uni_modules/vk-uview-ui/index.scss';
@import './static/css/zcm-main.css';
</style>

操作步骤：

直接在App.vue引入SCSS或者CSS 文件 选择发布。。然后部署任何一个服务器

预期结果：

发布后样式丢失无效

实际结果：

发布后

bug描述：

本地开发，样式一切正常，发布后所有样式都不生效。

Image Image Image

项目信息 详情
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 3.2.16
浏览器平台 Chrome
浏览器版本 93.0.4577.82（正式版本）
项目创建方式 HBuilderX

更多关于uni-app 【报Bug】vue3 css 全局样式引入 开发正常 发布后 样式全部丢失无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

顶起来，等待处理

更多关于uni-app 【报Bug】vue3 css 全局样式引入 开发正常 发布后 样式全部丢失无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没人解答一下吗？本人刚用VUE3 写项目 。。。先说下，，main 页面 中使用得 怎么事 createSSRApp 会不会是这个原因导致发布后得文件和Vue2 完全不同。。文件全部分开了。。会不会是这里得部署方式，vue3 和vue2 完全不一样导致

再次确认一次，，下载了最新得3.3.0 alpha版 H5发布后，，部署，，还是丢失全局CSS样式。

这个问题通常是由于发布构建时CSS文件路径处理不当导致的。在uni-app中，发布构建与开发环境的路径解析方式不同。

主要原因：

  1. 相对路径在构建后可能失效
  2. CSS文件未正确打包到最终产物中

解决方案：

方案一：使用绝对路径（推荐）

@import '@/uni_modules/vk-uview-ui/index.scss';
@import '@/static/css/zcm-main.css';

方案二：在vue.config.js中配置

// vue.config.js
const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

方案三：通过main.js全局引入

// main.js
import './uni_modules/vk-uview-ui/index.scss'
import './static/css/zcm-main.css'

方案四：检查构建配置 确保在manifest.json中正确配置了H5的publicPath：

{
  "h5": {
    "publicPath": "./"
  }
}
回到顶部