手搓vue3组件_0,打包配置-Toy模板网

这篇具有很好参考价值的文章主要介绍了手搓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,  //注释console
                        drop_debugger: true, //注释debugger
                        pure_funcs: ['console.log'], //移除console.log
                    },
                },
            })*/
        ],
        output: {
            libraryExport: '../behind/src/static'
        },
    },
})

当然,上面是在vue cli项目中的解决

关于这段配置的解释:文章来源地址https://www.toymoban.com/news/detail-652649.html

这段代码是用于配置 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/, '')
            }
        }
    }
})