vite3 + vue3 + pinia 配置 CDN 后打包部署后出现 Failed to resolve module specifier “vue“ 报错处理

Posted 2023-04-03 imtanqin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vite3 + vue3 + pinia 配置 CDN 后打包部署后出现 Failed to resolve module specifier “vue“ 报错处理相关的知识，希望对你有一定的参考价值。

参考文章： pinia 踩坑总结

报错分析

在项目中使用到了 pinia ，其中 vue 配置了 CDN，开发环境下一切正常，部署后报了如下的错误：

Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

随后我关闭了 CDN，再次部署，报错就没了，难道问题出在了 CDN 配置上？但是，当我继续使用 CDN，通过配置 2 个不同的路由页面，一个页面使用了 pinia，另一个页面不使用 pinia 时，发现不使用 pinia 的页面是可以进行路由跳转的，使用了 pinia的页面依然报错导致路由无法跳转，所以问题应该还是在 pinia 上。

分析发现， pinia 源码中引入了 vue-demi 这个包，vue-demi 又引入了 vue，然而 rollup-plugin-external-globals 插件配置全局变量时不会处理 node_modules 下的依赖项，导致 vue-demi 还是通过 import 的方式与 node_modules 下的 vue 进行关联，而没有使用全局变量下的 vue，打包后 vue 已变成外部依赖项，vue-demi 自然无法找到 vue，所以就报了以上的错误。

而且，查看打包后的文件，发现居然还有 import xxx from 'vue' 这样的代码存在，打包后根本不存在 vue，这打包后的代码出大问题。

修改配置

要解决以上问题，只需要我们给 vue-demi 也配置 CDN，这样就可以让 rollup-plugin-external-globals 影响到它，起到通知它也使用全局 vue 的作用了，配置如下：

// vite.config.ts
// 👇 用于将外部导入转换为全局变量 👇
import externalGlobals from "rollup-plugin-external-globals";

export default defineConfig(
// other config
  build: 
    rollupOptions: 
      // 👇 告诉打包工具 "vue-demi" 也是外部依赖项 👇
      external: ["vue", "element-plus", "vue-demi"],
      plugins: [
        externalGlobals(
          vue: "Vue",
          "element-plus": "ElementPlus",
          // 👇 配置 vue-demi 全局变量 👇
          "vue-demi": "VueDemi",
        ),
      ],
    ,
  ,
);

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vue.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus@2.2.12/dist/index.css">
    <script src="//cdn.jsdelivr.net/npm/vue@3.2.37"></script>
    <!-- 👇 添加 vue-demi 的 CDN 地址 👇 -->
    <script src="//cdn.jsdelivr.net/npm/vue-demi@0.13.7"></script>
    <script src="//cdn.jsdelivr.net/npm/element-plus@2.2.12"></script>
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

再次打包部署，这次就没有问题了，页面正常访问，pinia 也能正常工作。

Vite+Vue3+Pinia学习笔记

项目中安装pinia

yarn add pinia
# 或者使用 npm
npm install pinia

// main.js中引入
import  createApp  from 'vue';
import App from './App.vue';
const app = createApp(App);

// vue使用pinia
import  createPinia  from "pinia"
app.use(createPinia());

定义store，渲染state

在 src 目录下新建 store 目录，store 目录下新建 demo.ts

import  defineStore  from 'pinia';

export const demoStore = defineStore('demo', 
  state: () => 
    return 
      // 所有这些属性都将自动推断其类型
      counter: 0 as Number,
      mobile:"13111111111" as String
    
  ,
  getters:,
  actions:
)

在页面组件中渲染 state

<script lang="ts" setup>
// 引入storeToRefs函数，使得解构store仍具有响应式特性
import  storeToRefs  from "pinia";
// 引入定义的store
import  demoStore  from '@/store/demo';

// 实例化demoStore
const store = demoStore();
// 解构store获取state值
const  counter  = storeToRefs(store);
</script>

<template>
  <div>
    pinia测试counter
  </div>
</template>

<style lang="less" scoped>

</style>

修改state的几种方式

// 修改上面代码

<script lang="ts" setup>
// 引入storeToRefs函数，使得解构store仍具有响应式特性
import  storeToRefs  from "pinia";
// 引入定义的store
import  demoStore  from '@/store/demo';

// 实例化demoStore
const store = demoStore();
// 解构store获取state值
const  counter  = storeToRefs(store);

// 1.直接修改state
// const addCounter = () => store.counter ++;
// const reduceCounter = () => store.counter --;

// 2.$patch传递对象
const addCounter = () => 
  store.$patch(
    count:store.counter += 2,
    mobile:"13122222222"
  )
  store.getList();
;
const reduceCounter = () => 
  store.$patch(
    count:store.counter -= 2,
    mobile:"13122222222"
  )
;

// 3.$patch传递方法
// const addCounter = () => 
//   store.$patch(state => 
//     state.counter += 10
//   )
// ;
// const reduceCounter = () => 
//   store.$patch(state => 
//     state.counter -= 10
//   )
// ;

// 4.actions，查看下个代码片段
// 在actions中定义改变方法，组件通过store实例直接调用
// const addCounter = () => 
//   store.add(20);
// ;
// const reduceCounter = () => 
//   store.reduce(20)
// ;
</script>

<template>
  <div>
    pinia测试counter
    <button @click="addCounter">+</button>
    <button @click="reduceCounter">-</button>
  </div>
</template>

// 接上述代码片段4.actions修改state
// store/demo.ts

import  defineStore  from 'pinia';

export const demoStore = defineStore('demo', 
  state: () => 
    return 
      // 所有这些属性都将自动推断其类型
      counter: 0 as Number,
      mobile:"13111111111" as String
    
  ,
  getters:,
  actions:
    // 4.改变state值
    add(n:number)
      this.counter += n;
    ,
    reduce(n:number)
      this.counter -= n;
    
  
)

Getters的使用

// store/demo.ts

import  defineStore  from 'pinia';

export const demoStore = defineStore('demo', 
  state: () => 
    return 
      // 所有这些属性都将自动推断其类型
      counter: 0 as Number,
      mobile:"13111111111" as String
    
  ,
  getters:
    mobileHidden:(state):String => 
      return state.mobile.replace(/(\\d3)\\d4(\\d4)/g,`$1****$2`);
    
  ,
  actions:
    // 4.改变state值
    add(n:number)
      this.counter += n;
    ,
    reduce(n:number)
      this.counter -= n;
    
  
)

// 页面组件中使用同state

<script lang="ts" setup>
import  storeToRefs  from "pinia";
import  demoStore  from '@/store/demo';

const store = demoStore();
// 直接解构得出
const  counter,mobileHidden  = storeToRefs(store);
</script>

<template>
  <div class="x-demo-pinia">
    pinia测试counter-mobileHidden
  </div>
</template>

<style lang="less" scoped>

</style>

store互调

在 store 目录下新建 test.ts 作为第二个 store

// store/test.ts

import  defineStore  from 'pinia';

export const testStore = defineStore('test', 
  state: () => 
    return 
      list:[1,2,3] as Array<number>
    
  ,
  getters:,
  actions:
)

// store/demo.ts

import  defineStore  from 'pinia';
// 引入testStore
import  testStore  from './test';
import  toRaw  from "vue";

export const demoStore = defineStore('demo', 
  state: () => 
    return 
  ,
  getters:,
  actions:
    // store互调
    getList()
        // 需要先将testStore调用实例化，然后读取里面state
        console.log(toRaw(testStore().list))
    
  
)

<script lang="ts" setup>
import  storeToRefs  from "pinia";
import  demoStore  from '@/store/demo';

const store = demoStore();
const  counter,mobileHidden  = storeToRefs(store);

const addCounter = () => 
  store.$patch(
    count:store.counter += 2,
    mobile:"13111111111"
  )
  // 直接调用demoStore.getList方法
  store.getList();
;
</script>

<template>
  <div class="x-demo-pinia">
    pinia测试counter-mobileHidden 
    <button @click="addCounter">+</button>
  </div>
</template>

以上是关于vite3 + vue3 + pinia 配置 CDN 后打包部署后出现 Failed to resolve module specifier “vue“ 报错处理的主要内容，如果未能解决你的问题，请参考以下文章

Vue3+Vite3+Ts4配置移动端适配

项目实战旅游系统(Vue3+Pinia+vite)----项目配置

从零开始使用 vite + vue3 + pinia + naiveui 搭建简单后台管理系统

ts+vite3+vue3+mock+qs实现本地模拟数据功能