-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

This is my vue.config.js configuration:

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

After running ue- CLi -service build -mode test, the packaged code contains process, which should be node environment, but cannot be run in the browser environment

The following screenshot code is where the error occurred. Because the project build typed in the Process, the error was reported when the browser was running. Does anyone know why this problem occurred

enter image description here

潘凡者
  • 47
  • 3

1 Answers1

0

The reason is that there was a module that introduced import promise from 'promise', but this promise was not installed. The module then USES try catch so that ASAP types in the handling exception. However, ASAP, the processing module, UE - CLI - Server build - Mode test, does go into the Node environment.This representation is confusing, and you'll see that only if you configure Target :' Web ', you won't type process. However, the Target of Webpack is Web by default, so there should be some problems with @vue/ CLI.

The following problem detection is beyond my ability, so I have no intention to solve it. I hope someone can see more detailed explanation.

Ryan M
  • 18,333
  • 31
  • 67
  • 74
潘凡者
  • 47
  • 3