javascript - 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 = 9528const port = process.env.port || process.env.npm_config_port || 9999 // dev portconst 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

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

Answer 2

如果你使用的库没有提供 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 来实例化。