当前位置：首页 > news >正文

手搓vue3组件_0,打包配置

news 2025/7/25 7:10:33

打包后引入项目是发现报错:

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/, '')}}}
})