解决引入pinia后的上线部署问题：Uncaught TypeError: Failed to resolve module specifier “vue“.

主要问题

基于vue3+pinia的项目打包部署上线后无法正常运行。报错为：Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../"。

问题原因

排查后发现是因为vue是通过cdn引入了，pinia则是通过本地打包。所以运行过程中pinia想挂载在vue实例中，但是vue实例可能还没准备好，于是也就造成了目前的错误

问题解决

既然是缺少vue包，要么将vue在本地打包，要么在把pinia也cdn引入得了。我选择了第二种。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { Plugin as importToCDN } from 'vite-plugin-cdn-import''
 
export default defineConfig({
    plugins: [
        vue(),
        importToCDN({
            modules: [
                {
                    name: 'vue',
                    var: 'Vue',
                    path: 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js'
                },
                {
                    name: 'vue-router',
                    var: 'VueRouter',
                    path: 'https://cdn.bootcdn.net/ajax/libs/vue-router/4.2.4/vue-router.global.prod.js'
                },
                {
                    name: 'naive-ui',
                    var: 'naive',
                    path: 'https://cdn.bootcdn.net/ajax/libs/naive-ui/2.34.4/index.prod.min.js'
                },
                //将pinia也通过cdn引入
                {
                    name: 'pinia',
                    var: 'Pinia',
                    path: 'https://cdn.jsdelivr.net/npm/pinia@2.1.7/dist/pinia.iife.min.js'
                }
            ]
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    },
})复制

又一个问题 

但是但是本以为这样就ok了，结果部署上线又报错，提示：VueDemi is not defined

问题原因

查看了其他博主内容和github，大概是因为pinia考虑兼容vue3和vue2写法，所以需要vue-demi这个库来实现兼容。但是我的库里面没有包含该内容，所以也就导致了该内容。

问题解决

既然没有vue-demi，我就引入不就好了。不过我又考虑了是应该从cdn引入还是把它打包来弄呢？但是想了想了，加入pinia是本地安装打包，那就根本不需要vue-demi啊。如果从cdn引入，肯定考虑压缩包体积啊，vue-demi也cdn一把梭啊。故考虑引入cdn，然后解决问题。

作为新手，这样问题和解决方案确实没见过且看不懂，但是大为震撼！

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { Plugin as importToCDN } from 'vite-plugin-cdn-import'
import { visualizer } from 'rollup-plugin-visualizer'
 
export default defineConfig({
    plugins: [
        vue(),
        importToCDN({
            modules: [
                {
                    name: 'vue',
                    var: 'Vue',
                    path: 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js'
                },
                //cdn引入vue-demi
                {
                    name: 'vue-demi',
                    var: 'VueDemi',
                    path: 'https://cdn.jsdelivr.net/npm/vue-demi@0.14.6/lib/index.iife.min.js'
                },
                {
                    name: 'vue-router',
                    var: 'VueRouter',
                    path: 'https://cdn.bootcdn.net/ajax/libs/vue-router/4.2.4/vue-router.global.prod.js'
                },
                {
                    name: 'naive-ui',
                    var: 'naive',
                    path: 'https://cdn.bootcdn.net/ajax/libs/naive-ui/2.34.4/index.prod.min.js'
                },
                {
                    name: 'pinia',
                    var: 'Pinia',
                    path: 'https://cdn.jsdelivr.net/npm/pinia@2.1.7/dist/pinia.iife.min.js'
                }
            ]
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    },
})复制