打包后引入項目是發現報錯:
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/, '')}}}
})