vite+vue3+uniapp引入uview-plus 无效 报警告

具体安装方式 查看官网 或者其他安装的文章 安装完后 怎么配置才能正常显示?

main.js

import {
	createSSRApp
} from "vue";
import App from "@/App.vue";
import { createI18n } from "vue-i18n";
import messages from "@/locale";
import uviewPlus from 'uview-plus';

export function createApp() {
	const app = createSSRApp(App);
	const i18n = createI18n({
		legacy: false, // 推荐使用composition api
		locale: "zh-Hans", // 默认语言
		messages,
	  });
	
	  app.use(i18n);
	  app.use(uviewPlus); // 挂载uview-plus
	return {
		app,
	};
}

然后还有
pages.json 去注册

	"uniIdRouter": {},//定位位置改写那的  和tabBar同级
	"easycom": {
		"autoscan": true,
		"custom": {
			"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
			"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
		}
	}

现在可能出现scss 报错

在这里插入图片描述
还需要去vite.config.js中配置

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "uview-plus/theme.scss";`//如果还是报scss 错 查看下路径
      }
    }
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
})

如果还是报scss 错 查看下路径

### 解决 UniApp 引入 uView-Plus 报错的方法 当在 UniApp 项目中引入 uView-Plus 遇到 `$u-badge-primary: $u-primary !default` 类型的错误时,这通常是因为样式文件未能正确加载或存在版本兼容性问题。以下是几种可能的解决方案: #### 方法一:重新创建项目并添加 uView-Plus 如果尝试多次修复仍然失败,考虑重新创建一个新的 UniApp 项目,并严格按照官方文档指引来集成 uView-Plus[^1]。 ```bash # 创建新项目 vue create my-new-project cd my-new-project # 安装 uView-Plus npm install @dcloudio/uview-plus@latest --save ``` 接着,在 `main.js` 中全局注册 uView-Plus 的组件和服务: ```javascript import Vue from 'vue' import uView from '@/uni_modules/uview-plus' Vue.use(uView) ``` #### 方法二:检查配置项设置 对于某些特定情况下的报错,可能是由于配置不当引起的。确保已在项目的根目录下找到 `pages.json` 文件,并按如下方式调整 easycom 自动化配置选项[^5]: ```json { "easycom": { "autoscan": true, "custom": { "^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue", "^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue" } }, ... } ``` #### 方法三:处理打包后的样式丢失问题 针对升级至 Vue3Vite 后遇到的打包后样式不显示的问题,需确认 Webpack 或 Rollup 打包工具是否已正确定位到资源路径。可以通过修改构建脚本中的 alias 别名映射规则或将 CSS 提取为单独文件等方式加以改进[^2]: ```js // vite.config.ts 示例 import path from 'path'; export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src'), '~uview-plus': path.resolve(__dirname, './node_modules/@dcloudio/uview-plus') } }, }); ``` 通过上述措施之一或多者组合运用,应该能够有效缓解乃至彻底消除因引入 uView-Plus 而产生的各类异常状况。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值