vue2使用pinia报错Can‘t import the named export from non EcmaScript module

た入场券 2024-03-16 12:30 20阅读 0赞

### vue2中导入使用pinia ###

import {
         createPinia, PiniaVuePlugin } from "pinia";
    
    Vue.use(PiniaVuePlugin);
    const pinia = createPinia();
    new Vue({
        
      router,
      pinia,
      render: (h) => h(App),
    }).$mount("#app");

### 出现报错Can’t import the named export from non EcmaScript module ###

今天在老项目（vue2）中引入pinia，出现如题报错，去github上找到了对应解决方案

// vue.config.js
    module.exports = {
        
      configureWebpack: {
        
        module: {
        
          rules: [
            {
        
              test: /\.mjs$/,
              include: /node_modules/,
              type: "javascript/auto"
            }
          ] 
        }
      }
    }

Webpack 的 configureWebpack 选项，用于定制 Webpack 的配置。在这个配置中，通过 module 属性指定了要对模块进行处理的规则。

通过 test 属性指定了要匹配的文件类型，即以 .mjs 结尾的文件。通过 include 属性，限定了只对位于 node\_modules 目录下的模块文件进行处理。处理类型通过 type 属性指定为 “javascript/auto”，这告诉 Webpack 在处理这些模块时将其视为普通的 JavaScript 文件，而不是将其转换为其他类型的模块。

总的来说，这段代码的作用是配置 Webpack，使其能够正确地处理位于 node\_modules 目录下的 .mjs 文件，将其视为 JavaScript 模块进行处理。