EMP v2 VUE2 QA

[ckken]

与 vue 相关配置问题可以在这里讨论!

[ckken]

#308
#304
#303
#302
#293

[yesay]

将vue2 项目改造成 emp 后，在 linux 服务器上打包时，报内存溢出的错误。
帮忙审查下问题出在哪里吧。

[yesay]

emp-config.js 的文件内容：

const FileManagerPlugin = require('filemanager-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require('compression-webpack-plugin').CompressionPlugin;

const vue2 = require('@efox/plugin-vue-2')
const {defineConfig} = require('@efox/emp')
const {cdn} = require('./cdn')
const esm = (name, mode, version) =>
https://esm.sh/${name}${version ? '@' + version : ''}${mode === 'development' ? '?dev' : ''}

const packageName = 'dist';
var IS_PROD = (process.env.NODE_ENV == 'CLUSTER') ? true:false

console.log("|"+process.env.NODE_ENV+"|")

console.log(IS_PROD ? '注意：当前是生产环境！！！' : '开发或测试模式')

module.exports = defineConfig(config => {
const{mode, env} = config
// const target = 'es2018'
const target = 'es5'
const isESM = !['es3', 'es5'].includes(target)
return {
plugins: [vue2],
appEntry: 'main.js',
server: {port: 9005},
html: {
title: 'EMP Vue2 Base',
favicon: 'src/logo.png',
template: 'src/index.html'
},
build: {
target,
//是否清空生成文件夹
emptyOutDir: true,
//生产 环境：打包时不生成.map文件，设置为false 避免看到源码
sourcemap: !IS_PROD,
// + 类型 boolean | swc
// + 默认 true
// 启用 swc 进行压缩 比 terser 速度提升 7倍,目前处于 RC 阶段，可以正常使用
minify: true,
outDir: 'dist',
parallel: require("os").cpus().length > 1,
lintOnSave: false,
runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
publicPath: process.env.NODE_ENV === 'production' ? './' : './' , // 默认'/'，部署应用包时的基本 URL
},
debug:{
clearLog: true,
progress: true,
profile: false,
level: 'info'
},
empShare: {
name: 'whpgovViewUi',
remotes: {
'@roadViewUi': 'roadViewUi@http://192.168.124.66:9003/emp.js',
},
exposes: {

  },
    // shared: {
    //     vue: {requiredVersion: '^2.6.14'},
    //     'element-ui': {requiredVersion: '^2.0.0'},
    //     'vue-router': {requiredVersion: '^3.0.0'},
    //     'view-design' :{requiredVersion:'^4.4.0'}
    // },
  shareLib: !isESM
    ? cdn(mode)
    :
      {
        vue: esm('vue',mode,'2.6.14'),
        // 'element-ui': esm('element-ui'),
        'view-design': esm('view-design',mode,'4.7.0')
      },
},
"resolve":{
  "alias": {
    "@": "src"
  },
},
// webpack配置
webpackChain:  (chain, config) => {
  if (process.env.NODE_ENV == 'production'
      || 'buildTest' == process.env.NODE_ENV
      || 'CLUSTER' == process.env.NODE_ENV
  ) {
    // 增加zip打包插件
    chain.plugin('FileManagerPlugin').use(
        new FileManagerPlugin({
          events: {
            onEnd: {
              delete: [ //首先需要删除项目根目录下的dist.zip
                `./${packageName}.zip`
              ],
              archive: [ //然后我们选择dist文件夹将之打包成dist.zip并放在根目录
                {source: `./${packageName}`, destination: `./${packageName}.zip`, format: 'zip'},
              ]
            }
          }
        })
    ).plugin('BundleAnalyzerPlugin').use(new BundleAnalyzerPlugin()).plugin('CompressionPlugin').use(
        new CompressionPlugin({
          test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/,
          threshold: 10240,
          deleteOriginalAssets: false
        })
    )
    ///
    config.externals({
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter'
    })
  }
},
optimization: {
  //webpack不自动读取配置文件中的mode给process.env.NODE_ENV赋值
  nodeEnv: false
},
/////////////////////
css: {
  loaderOptions: {
    less: {
      // 这里的选项会传递给 less-loader
      javascriptEnabled:true   // 设置为true 可以通过变量覆盖方式修改iview主题颜色
    }
  },
}

}
})

[ckken]

    chain.plugin('FileManagerPlugin').use(
        new FileManagerPlugin({
          events: {
            onEnd: {
              delete: [ //首先需要删除项目根目录下的dist.zip
                `./${packageName}.zip`
              ],
              archive: [ //然后我们选择dist文件夹将之打包成dist.zip并放在根目录
                {source: `./${packageName}`, destination: `./${packageName}.zip`, format: 'zip'},
              ]
            }
          }
        })
    ).plugin('BundleAnalyzerPlugin').use(new BundleAnalyzerPlugin()).plugin('CompressionPlugin').use(
        new CompressionPlugin({
          test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/,
          threshold: 10240,
          deleteOriginalAssets: false
        })
    )

这两个删掉看看

[ckken]

最好先用排查法 裸项目是否有这个问题