javascript - 当我运行 vue-cli -service build -mode test 时出现错误。未定义进程。但是使用 vue-cli -service build 不会报这个错误
问题描述
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 test后，打包后的代码包含进程，应该是node环境，但不能在浏览器环境下运行
以下屏幕截图代码是发生错误的地方。因为项目build输入了Process，所以在浏览器运行的时候就报错了。有谁知道为什么会出现这个问题
解决方案
原因是有一个模块从'promise'引入了import promise，但是这个promise没有安装。然后该模块使用 try catch 以便 ASAP 键入处理异常。但是，ASAP，处理模块，UE - CLI - 服务器构建 - 模式测试，确实进入了 Node 环境。这种表示是令人困惑的，你会看到只有配置 Target :' Web '，你不会类型进程。但是Webpack的Target默认是Web，所以@vue/ CLI应该有一些问题。
下面的问题检测超出了我的能力，所以我没有打算解决它。我希望有人能看到更详细的解释。