收藏
回答

Kbone打包vue3项目发生的报错?

报错的地方,似乎提示是我引入script的路径出了问题,但是原项目并未存在script动态引入的情况。以下是 webpack.config.js

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const MpPlugin = require('mp-webpack-plugin') // 用于构建小程序代码的 webpack 插件
const mpPluginConfig = require('./miniprogram.config.js')

const isOptimize = true // 是否压缩业务代码,开发者工具可能无法完美支持业务代码使用到的 es 特性,建议自己做代码压缩

module.exports = {
    mode: 'production',
    entry: {
        // js 入口
        home: path.resolve(__dirname, '../src/main.mp.js'),
    },
    output: {
        path: path.resolve(__dirname, './miniprogram/common'), // 放到小程序代码目录中的 common 目录下
        library: 'createApp', // 必需字段,不能修改
        libraryExport: 'default', // 必需字段,不能修改
        libraryTarget: 'window', // 必需字段,不能修改
    },
    target: 'web', // 必需字段,不能修改
    optimization: {
        runtimeChunk: false, // 必需字段,不能修改
        splitChunks: { // 代码分割配置,不建议修改
            chunks: 'all',
            minSize: 0,
            maxSize: 0,
            minChunks: 1,
            maxAsyncRequests: 100,
            maxInitialRequests: 100,
            automaticNameDelimiter: '~',
            name: false,
            cacheGroups: {
                defaultVendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        },

        minimizer: isOptimize ? [
            // 压缩CSS
            new CssMinimizerPlugin({
                test: /\.(css|wxss)$/g,
                minimizerOptions: {
                    preset: ["default", {
                            discardComments: { 
                                removeAll: true 
                            },
                        },
                    ],
                },
            }),
            // 压缩 js
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
                parallel: true,
            })
        ] : [],
    },
    module: {
        rules: [
            // css
            {
                test: /\.(css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                 ],
            },
            // vue
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            // js
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[contenthash]'
                }
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'element-plus': 'element-plus/dist/index.full.min.js',
            '@': path.resolve(__dirname, '../src'),
            package: path.resolve(__dirname, '../package.json'),
        },
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.isMiniprogram': process.env.isMiniprogram, // 注入环境变量,用于业务代码判断
        }),
        new MiniCssExtractPlugin({
            filename: '[name].wxss',
        }),
        new VueLoaderPlugin(),
        new MpPlugin(mpPluginConfig),
    ],
}


以下是miniprogram.config.js

module.exports = {
    origin: 'https://test.miniprogram.com',
    entry: '/',
    router: {
        home: [
            '/home',
        ],
    },
    redirect: {
        notFound: 'home',
        accessDenied: 'home',
    },
    generate: {
        globalVars: [['SVGElement', 'function SVGElement() {}']], // 兼容 vue3 3.0.8+ 版本
    },
    app: {
        backgroundTextStyle: 'dark',
        navigationBarTextStyle: 'white',
        navigationBarTitleText: 'miniprogram-project',
    },
    appExtraConfig: {
        sitemapLocation: 'sitemap.json',
    },
    global: {
        share: true,
        windowScroll: false,
        backgroundColor: '#F7F7F7',
    },
    pages: {},
    optimization: {
        domSubTreeLevel: 10,


        elementMultiplexing: true,
        textMultiplexing: true,
        commentMultiplexing: true,
        domExtendMultiplexing: true,


        styleValueReduce: 5000,
        attrValueReduce: 5000,
    },
    projectConfig: {
        appid: 'wx3c952c5a483fe03f',
        projectname: 'genshin-calculator',
    },
}
回答关注问题邀请回答
收藏

1 个回答

  • 2022-04-19

    如果有碰到类似问题的大佬,希望能指点一下

    2022-04-19
    有用
    回复
登录 后发表内容
问题标签