手搓vue3組件_0,打包配置

打包后引入項目是發現報錯:

Cannot read properties of null (reading 'isCE')
TypeError: Cannot read properties of null (reading 'isCE')

這個是由于vue版本沖突問題,
這里我引入了自己打包的ui組件庫,但是ui組件庫中打包進入了自己的vue,那么在此時使用時,如果你引入的自己的組件中有slot,那么就會包這個問題,
解決方法千奇百怪
我的解決:
vue.config.js中加上:

resolve: {symlinks: false,alias: {vue: path.resolve('./node_modules/vue')}},

那么它的完整配置就是:

const { defineConfig } = require('@vue/cli-service')
// const webpack = require("webpack");
//打包配置自動忽略console.log等
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')module.exports = defineConfig({productionSourceMap: false,transpileDependencies: true,publicPath: '/',//代理devServer: {// 指定項目啟動時的默認端口號port: 80,historyApiFallback: true,allowedHosts: 'all',proxy: {'/': {ws: false,target: "http://localhost:89",changeOrigin: true,pathRewrite: {'^/': '/'}}},// proxy: 'http://localhost:8090'},configureWebpack: {resolve: {symlinks: false,alias: {vue: path.resolve('./node_modules/vue')}},plugins: [//打包環境去掉console.log等/* @author icestone , 17:22* @date 2023/5/15* 下面這個應該在打包時才打開,開發時不要打開,編譯消耗很多時間*//*new UglifyJsPlugin({uglifyOptions: {compress: {//warnings: false, 注釋不然打包會報錯如圖下圖drop_console: true,  //注釋consoledrop_debugger: true, //注釋debuggerpure_funcs: ['console.log'], //移除console.log},},})*/],output: {libraryExport: '../behind/src/static'},},
})
  • 當然,上面是在vue cli項目中的解決

關于這段配置的解釋:

這段代碼是用于配置 Webpack 的,它的目的是為了設置項目的別名和禁用符號鏈接。resolve.symlinks: false:這一行設置為 false 表示禁用符號鏈接。符號鏈接是一種特殊的文件鏈接,它允許一個文件或目錄鏈接到另一個文件或目錄。在某些情況下,符號鏈接可能會導致問題,因此將其設置為 false 是合適的。resolve.alias: { vue: path.resolve('./node_modules/vue') }:這一行設置了一個別名,它的作用是將 vue 模塊解析為 ./node_modules/vue。這樣,Webpack 就可以找到 Vue.js 庫的入口文件,并且不會出現找不到模塊的情況。path.resolve('./node_modules/vue') 是一個計算屬性,它將當前項目的根路徑與 vue 模塊的路徑進行拼接,得到 Vue.js 模塊的完整路徑。總之,這段代碼的作用是配置 Webpack 以禁用符號鏈接并設置 Vue.js 模塊的別名。
  • 在vite項目中也是這樣解決的,顯式聲明使用的vue位置:
import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, 'src'),vue: path.resolve('./node_modules/vue')}},css: {// 預處理器配置項preprocessorOptions: {less: {math: "always",},},},server: {proxy: {// 正則表達式寫法'/api': {target: 'http://localhost:89',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
})

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/35614.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/35614.shtml
英文地址,請注明出處:http://en.pswp.cn/news/35614.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

原生js發送ajax請求---ajax請求篇(一)

在原生js中我們使用的是XMLHttpRequest對象來發送ajax請求 主要步驟就是: 1.創建XMLHTTPRequest對象 2.使用open方法設置和服務器的交互信息 3.設置發送的數據,開始和服務器端交互 4.注冊事件 5.更新界面 (1) get方式 //步驟一…

使用python對圖像加噪聲

加上雨點噪聲 import cv2 import numpy as npdef get_noise(img, value10):#生成噪聲圖像>>> 輸入: img圖像value 大小控制雨滴的多少 >>> 返回圖像大小的模糊噪聲圖像noise np.random.uniform(0, 256, img.shape[0:2])# 控制噪聲水平&#xff…

誰能講清楚Spark之與MapReduce的對比

我們已經知道Spark是如何設計和實現數據處理流程的,這里我們 再深入思考一下,為什么Spark能夠替代MapReduce成為主流的大數據處理框架呢?對比MapReduce,Spark究竟有哪些優勢? 一 優勢 1 通用性: 基于函數式編程思想,MapReduce將數據類型抽象為,k,v格式,并將數據處理…

Spring Boot單元測試使用MockBean注解向Service注入Mock對象

1. 背景介紹 我們在測試時有一個Service,我們需要測試Service,但Service內部依賴ServiceA、ServiceB,此時我們希望Mock ServiceA,ServiceB 注入真實對象。 class Service {private ServiceA A;private ServiceB B;public int me…

OPENCV C++(十二)模板匹配

正常模板匹配函數 matchTemplate(img, templatee, resultMat, 0);//模板匹配 這里0代表的是方法,一般默認為0就ok img是輸入圖像 templatee是模板 resultmat是輸出 1、cv::TM_SQDIFF:該方法使用平方差進行匹配,因此最佳的匹配結果在結果為…

Excel(1):表頭或列頭凍結

1.需求 對于較大的excel,通常需要固定一部分內容,另一份內容為可翻動。 2.解決方式 在視圖中選擇凍結窗格,需要注意的是,選擇凍結窗格時,窗格的左上方的表格區域是固定不動的,只可以向下或者向右活動。

8.10論文閱讀

文章目錄 The multimodal MRI brain tumor segmentation based on AD-Net摘要本文方法損失函數 實驗結果 max-vit - unet:多軸注意力醫學圖像分割摘要本文方法實驗結果 The multimodal MRI brain tumor segmentation based on AD-Net 摘要 基于磁共振成像(MRI)的多模態膠質瘤…

Redis分布式鎖問題

1、業務單機情況下 問題:并發沒有加鎖導致線程安全問題。 解決方法:加鎖處理,如lock、synchronized 仍有問題:業務分布式情況下,代碼級別加鎖已經無效。需要借助第三方組件,如redis、zookeeper。 2、業務分…

云計算|OpenStack|使用VMware安裝華為云的R006版CNA和VRM---初步使用(二)

前言: 在前面一篇文章云計算|OpenStack|使用VMware安裝華為云的R006版CNA和VRM---初始安裝(一)_華為cna_晚風_END的博客-CSDN博客 介紹了基于VMware虛擬機里嵌套部署華為云的云計算,不過僅僅是做到了在VRM的web界面添加計算節點…

Kubernetes的默認調度和自定義調度詳解

默認調度和自定義調度詳解 默認調度 默認調度是 Kubernetes 中的內置機制,它使用調度器組件來管理分配容器的節點。調度器依據以下原則選擇合適的節點: 資源需求 :調度器會為每個 Pod 根據其 CPU 和內存需求選擇一個具有足夠資源的節點。親…

Android使用kotlin+協程+room數據庫的簡單應用

前言:一般主線程(UI線程)中是不能執行創建數據這些操作的,因為等待時間長。所以協程就是為了解決這個問題出現。 第一步:在模塊級的build.gradle中引入 id com.android.application// roomid kotlin-androidid kotlin…

Mysql主從分離

一、前言 某個應用場景中,在操作數據庫這部分,往往是數據庫的讀取往往大于數據庫的寫入,當讀取數據達到數據庫的瓶頸時,性能下滑,影響數據的寫入,導致整個應用的不可用。為了解決這個問題,這時&…

單片機直驅兩相四線步進電機研究

【本文發布于https://blog.csdn.net/Stack_/article/details/132236329,未經允許不得轉載,轉載須注明出處】 雙極性步進電機(兩相四線步進電機),原理的東西就先不講太多了,還沒搞清楚,邊查資料邊…

jsoup解析html之table表格

jsoup解析html之table表格 jsoup說明 一款Java 的HTML解析器 jsoup 是一款Java 的HTML解析器,可直接解析某個URL地址、HTML文本內容。它提供了一套非常省力的API,可通過DOM,CSS以及類似于jQuery的操作方法來取出和操作數據。 主要功能 從一…

Python Opencv實踐 - 圖像旋轉

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_COLOR)#圖像旋轉 #Opencv中的旋轉,首先通過cv.getRotationMatrix2D獲得旋轉矩陣 #cv.getRotationMatrix2D(center,ang…

Mr. Cappuccino的第62杯咖啡——Spring之Bean的生命周期

Spring之Bean的生命周期 Aware接口項目結構項目代碼運行結果源代碼使用場景 InitializingBean接口項目結構項目代碼運行結果源代碼 BeanFactoryPostProcessor接口項目結構項目代碼運行結果源代碼 Bean的生命周期項目結構項目代碼運行結果源代碼 Aware接口 實現Aware接口是為了…

微信小程序實現圖片多點裁剪

話不多說&#xff0c;直接上代碼 1、頁面布局 <view class"buttons" style"height: 50px;"><view class"upload btn" style"background-color: #d18118;"bindtap"uploadImage"> 上傳圖片 </view><vie…

機器視覺項目流程和學習方法

機器視覺項目流程&#xff1a; 00001. 需求分析和方案建立 00002. 算法流程規劃和業務邏輯設計 00003. 模塊化編程和集成化實現 00004. 調試和優化&#xff0c;交付客戶及文檔 學習機器視覺的方法&#xff1a; 00001. 實戰學習&#xff0c;結合項目經驗教訓 00002. 學習…

c++參數傳遞

函數的參數傳遞 指的是形參與實參結合的過程&#xff0c;其基本方式包括值傳遞和引用傳遞兩種。 值傳遞 該方法把參數的實際值復制給函數的形式參數。在這種情況下&#xff0c;修改函數內的形式參數對實際參數沒有影響 #include<iostream> using namespace std;void swap…

NAS搭建指南二——影視資源中心

1. 刮削 這一部分是利用 tinyMediaManager 進行影視資源的評分、簡介以及圖片的搜集工作tinyMediaManager 官方網站地址下載及安裝過程&#xff1a;略我的主要修改的設置項如下所示&#xff1a; 使用方法&#xff1a; a. 點擊更新媒體庫 b. 選擇影片–>右鍵單擊–>…