VUE2.6安装minio,webpack编译不了？

Question

,vue.config中配置.mjs还是不行，请问是什么原因呢

'use strict'
const path = require('path')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
const webpack = require('webpack')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const cdn = {
  css: [],
  js: [
    'https://cdn.jsdelivr.net/npm/vue@2.6.10',
    'https://unpkg.com/vue-router@3.0.6/dist/vue-router.js'
  ]
}

// 引入等比适配插件
const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16
})

const dllPublishPath = '/vendor'

// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9999 // dev port

const proxy = process.env.VUE_APP_WF ? {
  '/wf': {
    target: 'http://192.168.2.142:3333',
    changeOrigin: true
  },
  '/authentication': {
    target: 'http://192.168.2.142:3333',
    changeOrigin: true
  }
} : null

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/',
  transpileDependencies: ['single-spa', 'qiankun', 'import-html-entry', 'element-ui', 'vendor/vendor.dll.3395.js'],
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: port,
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    proxy: proxy
  },
  configureWebpack: {
    externals: {
      'this.prefix': 'this.$store.state.user.prefix'
    },
    plugins: [
      new webpack.DllReferencePlugin({
        context: process.cwd(),
        manifest: require('./public/vendor/vendor-manifest.json')
      }),
      // 将 dll 注入到 生成的 html 模板中
      new AddAssetHtmlPlugin({
        // dll文件位置
        filepath: path.resolve(__dirname, './public/vendor/*.js'),
        // dll 引用路径
        publicPath: dllPublishPath,
        // dll最终输出的目录
        outputPath: './vendor'
      })
    ]
  },
  chainWebpack(config) {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('vue$', 'vue/dist/vue.esm.js')
    config.plugin('html')
      .tap(args => {
        args[0].cdn = cdn
        return args
      })
    // it can improve the speed of the first screen, it is recommended to turn on preload
    config.plugin('preload').tap(() => [
      {
        rel: 'preload',
        // to ignore runtime.js
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ])

    // when there are many pages, it will cause too many meaningless requests
    config.plugins.delete('prefetch')

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .end()
  },
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          outputStyle: 'expanded'
        }
      }
    }
  }
}

Answer 1

如果你使用的库没有提供 ESM 的暴露方式，那么直接用 require 的形式使用就行了， VueCLI 是可以混用 require 和 import 的。并不是像 Vite 只支持 import。

但是我看了一下你使用的 minio 这个JS库，是提供 cjs 和 esm 两种导出方式的，我写了一个简单的Demo直接通过 import { Client } from 'minio' 引入也是可以正常编译和运行的，所以我怀疑是你没有正确引入导致的。

所以最好再贴一下你在业务中是怎么引入和使用 minio 的，因为我看报错信息是没有正确 import 出现的错误。
比如说你直接 import minio from 'minio' 这样引入了，但 minio 是没有做默认导出的，所以不能直接 import minio from 'mino'。
你得 import { Client } from 'minio' 这样来引入，然后直接用 new Client 来实例化。或者 import * as minio from "minio"，然后 new minio.Client 来实例化。

Answer 2

node V12不行，升级到node V14可以，另外配置转.mjs的loder