-2
Uncaught ReferenceError: process is not defined
/storage/emulated/0/Android/data/com.midea.out.css.test/files/www/com.midea.engineer.application.ms/cordova.js?ver=md5:314:13 ReferenceError: process is not defined
at u (file:///storage/emulated/0/Android/data/com.midea.out.css.test/files/www/com.midea.engineer.application.ms/static/js/app.js:1:285918)
at s (file:///storage/emulated/0/Android/data/com.midea.out.css.test/files/www/com.midea.engineer.application.ms/static/js/app.js:1:285692)
at file:///storage/emulated/0/Android/data/com.midea.out.css.test/files/www/com.midea.engineer.application.ms/static/js/app.js:1:739057
at l (file:///storage/emulated/0/Android/data/com.midea.out.css.test/files/www/com.midea.engineer.application.ms/static/js/app.js:1:739281)
at u (file:///storage/emulated/0/Android/data/com.midea.out.css.test/files/www/com.midea.engineer.application.ms/static/js/app.js:1:739729)
at c (file:///storage/emulated/0/Android/data/com.midea.out.css.test/files/www/com.midea.engineer.application.ms/static/js/app.js:1:739645)
at file:///storage/emulated/0/Android/data/com.midea.out.css.test/files/www/com.midea.engineer.application.ms/static/js/app.js:1:740037
at file:///storage/emulated/0/Android/data/com.midea.out.css.test/files/www/com.midea.engineer.application.ms/static/js/app.js:1:274361
at Object.callbackFromNative (file:///storage/emulated/0/Android/data/com.midea.out.css.test/files/www/com.midea.engineer.application.ms/cordova.js?ver=md5:293:58)
at <anonymous>:1:9

これは私の vue.config.js 構成です:

let webpack = require('webpack')
let CopyWebpackPlugin = require("copy-webpack-plugin");
let ZipPlugin = require("zip-webpack-plugin");
let path = require("path");
let buildConfig = require("./buildConfig");
let shell = require('shelljs');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const FileManagerPlugin = require('filemanager-webpack-plugin');
const IS_PRODUCTION = process.env.NODE_ENV === 'production';
const IS_DEVELOPMENT = process.env.NODE_ENV === 'development';
console.log(process.env.NODE_ENV)
// 删除.zip包 并讲static里的资源copy至dist
var assetsPath = path.join(buildConfig.build.assetsRoot, buildConfig.build.assetsSubDirectory)
shell.rm('-rf', assetsPath)
shell.rm('-rf', '*.zip', path.resolve(__dirname, '../*.zip'));
shell.mkdir('-p', assetsPath)
shell.config.silent = true
shell.cp('-R', 'static/*', assetsPath)
shell.config.silent = false;


let exportConfig = {
    assetsDir: 'static',
    publicPath: './',
    productionSourceMap: IS_PRODUCTION !== true,
    configureWebpack: () => {
        const plugins = [];
        plugins.push(new HtmlWebpackPlugin({
            filename: path.join(__dirname, './dist/index.html'),
            template: 'index.html',
            inject: true,
            templateParameters(compilation, assets, options) {
                return {
                    compilation: compilation,
                    webpack: compilation.getStats().toJson(),
                    webpackConfig: compilation.options,
                    htmlWebpackPlugin: {
                        files: assets,
                        options: options
                    },
                    process,
                };
            },
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
                // more options:
                // https://github.com/kangax/html-minifier#options-quick-reference
            },
            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
            chunksSortMode: 'auto'
        }));
        if (process.env.NODE_ENV === "production") {
            plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            // warnings: false,
                            drop_console: true,
                            pure_funcs: ["console.log"] //移除console
                        }
                    },
                    sourceMap: false,
                    parallel: true
                })
            );
            // 按需加载
            plugins.push(LodashModuleReplacementPlugin);
        }
        // 设置全局变量
        let ENV_TYPE, CONF = path.resolve(__dirname, './src/projectConfig.js');
        switch (process.env.NODE_ENV) {
            case 'development':
                ENV_TYPE = path.resolve(__dirname, './buildConfig/dev.env.js');
                break;
            case 'test':
                ENV_TYPE = path.resolve(__dirname, './buildConfig/test.env.js');
                break;
            case 'production':
                ENV_TYPE = path.resolve(__dirname, './buildConfig/prod.env.js');
                break
        }
        plugins.push(new webpack.ProvidePlugin({
            '$envType': ENV_TYPE,
            '$conf': [CONF, 'default']
        }));
        if (!IS_DEVELOPMENT) {
            let CopyWebpackPluginObj = [
                {
                    from: path.join(__dirname, './CubeModule.json'),
                    to: path.join(__dirname, './dist/CubeModule.json'),
                    transform: function (content, path) {
                        if (!IS_PRODUCTION) {
                            // 对调版本号
                            const cubeModule = JSON.parse(content)
                            var temp = {
                                version: cubeModule.version,
                                build: cubeModule.build
                            }
                            for (var p in temp) {
                                cubeModule[p] = cubeModule['test' + p[0].toUpperCase() + p.slice(1)]
                                cubeModule['test' + p[0].toUpperCase() + p.slice(1)] = temp[p]
                            }
                            return new Buffer.from(JSON.stringify(cubeModule))
                        } else {
                            return new Buffer.from(content)
                        }

                    }
                },
                {
                    from: path.join(__dirname, './static'),
                    to: path.join(__dirname, './dist/static/'),
                }
            ];
            plugins.push(new CopyWebpackPlugin({patterns: CopyWebpackPluginObj}));
            plugins.push(new FileManagerPlugin({
                events: {
                    onEnd: {
                        archive: [
                            {
                                source: './dist',
                                destination: './' + IS_PRODUCTION === true ? buildConfig.build.zipName : buildConfig.buildTest.zipName
                            },
                        ]
                    }
                }
            }));
            // plugins.push(new ZipPlugin({
            //     path: path.join(__dirname, './'),
            //     filename: IS_PRODUCTION === true ? buildConfig.build.zipName : buildConfig.buildTest.zipName,
            // }));
            if (process.env.npm_config_report) {
                // 打包后模块大小分析//npm run build --report
                plugins.push(new BundleAnalyzerPlugin());
            }
        }
        return {
            plugins: plugins
        }
    },
    chainWebpack: (webpackConfig) => {
        // 删除预加载
        // webpackConfig.plugins.delete('preload');
        // webpackConfig.plugins.delete('prefetch');
        // todo 按理说这个应该是不需要了
        // webpackConfig
        //     .entry('./src/main.js')
        //     .add('babel-polyfill')
        //     .end();
        /*设置资源夹路径*/
        webpackConfig.resolve
            .alias
            .set("assets", path.join(__dirname, "src/assets"))
            .set("$common", path.join(__dirname, "src/js/common.js"))
            .set('@', path.join(__dirname, 'src'))
            .set("@assets", "@/assets")
            .set("@components", "@/components")
            .set("@css", "@/assets/style")
            .set("@img", "@/assets/images")
            .set("@store", "@/store");
        /*设置资源夹路径*/
        webpackConfig.resolve
            .extensions
            .add('.js').add('.vue').add('.json');
        // 压缩图片
        webpackConfig.module
            .rule("images")
            .use("image-webpack-loader")
            .loader("image-webpack-loader")
            .options({
                mozjpeg: {
                    progressive: true,
                    quality: 65
                },
                optipng: {
                    enabled: false
                },
                pngquant: {
                    quality: [0.65, 0.90],
                    speed: 4
                },
                gifsicle: {
                    interlaced: false
                }
            })
            .tap(options => Object.assign(options, { limit: 2040 }));
        // 处理mp3
        webpackConfig.module
            .rule("mp3")
            .test(/\.(mp3)$/)
            .use("file-loader")
            .loader("file-loader")
            .end();
        // webpackConfig.module
        //     .rule('js')
        //     .test(/\.js$/)
        //     .exclude
        //     .add('/node_modules/')
        if (IS_PRODUCTION) {
            // 代码压缩
            webpackConfig.optimization.minimize(IS_PRODUCTION);
            //分割代码
            webpackConfig.optimization.splitChunks({
                chunks: 'all'
            })
        }
        webpackConfig.devtool(IS_PRODUCTION === true ? false : "source-map");
    },

    css: {
        extract: IS_DEVELOPMENT !== true, // 是否使用css分离插件 ExtractTextPlugin  为true时不会热更新
        sourceMap: false, // 开启 CSS source maps?
        // 启用 CSS modules for all css / pre-processor files.
        requireModuleExtension: false,
        loaderOptions: {
            css: {
                // 这里的选项会传递给 css-loader
            },
            less: {
                // data: `@import "~@css/variable.less";`
            },
            postcss: {
                // 这里的选项会传递给 postcss-loader
            }
        }
    },
    // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
    parallel: require("os").cpus().length > 1,
    devServer: {
        port: 8080,
        open: false
    },
    // 第三方插件配置
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                // path.resolve(__dirname, 'src/assets/style/common.less'),
                // path.resolve(__dirname, 'src/assets/style/mixins.less'),
                // path.resolve(__dirname, 'src/assets/style/reset.less'),
                // path.resolve(__dirname, 'src/assets/style/variable.less'),
            ]
        }
    }
}


module.exports = exportConfig

ue-CLi-service build-mode テストを実行した後、パッケージ化されたコードにはプロセスが含まれています。これはノード環境である必要がありますが、ブラウザー環境では実行できません。

次のスクリーンショット コードは、エラーが発生した場所です。プロジェクトのビルドがプロセスに入力されたため、ブラウザーの実行中にエラーが報告されました。この問題が発生した理由を知っている人はいますか

ここに画像の説明を入力

4

1 に答える 1