qq_58242303 2023-03-28 14:31 采纳率: 50%
浏览 26
已结题

项目部署到服务器报错:vue+vite+node+pinia

vite+vue+node+pinia

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".我把vue3+vite4+pinia+node的项目部署到服务器, 然后访问域名就报这个错,有没有大佬救救!!!

  • 写回答

3条回答 默认 最新

  • 瞬间的醒悟 2023-03-28 16:00
    关注

    这个错误通常意味着您的应用程序无法加载 Vue 模块。这可能是由于以下原因之一:

    1. Vue 模块未正确安装或安装期间出现问题;
    2. 应用程序在加载 Vue 模块时出现了路径问题。

    此外,您提到将应用程序部署到服务器上。请确保您在生产环境中正确设置了相关配置选项。例如,您需要为生产构建使用 vite build 命令,而不是使用 vite serve

    下面是一些可能有助于解决此问题的步骤:

    1. 确认 Vue 模块已正确安装。您可以通过运行 npm ls vue 或者 yarn list vue 来检查 Vue 的安装状态。
    2. 查看 vite.config.js 文件,确保您的配置中包含正确的别名,例如:
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [vue()],
      resolve: {
        alias: [
          { find: '@', replacement: '/src' },
          { find: 'vue', replacement: 'vue/dist/vue.esm-bundler.js' }
        ]
      }
    })
    
    1. 如果您使用了 Node.js,可能需要更新您的 package.json 文件的 "type" 字段,以确保它被设置为 "module"。例如:
    {
      "name": "my-app",
      "type": "module",
      "dependencies": {
        "vue": "^3.0.0",
        "vite": "^2.0.0"
      }
    }
    
    1. 最后,如果您使用了类似 pm2 的进程管理工具,请确保它们正确地设置了 Node.js 的环境变量。

    希望以上步骤可以有助于解决您的问题。如果问题仍然存在,请提供更多详细信息,我们将尽力提供支持。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 崽崽的谷雨 2023-03-28 16:53
    关注

    参考自chatGPT:
    这个错误提示表明在你的项目中,无法正确解析 vue 模块的引用路径。这可能是由于以下几个原因导致的:

    你的项目中没有正确安装 vue 模块,或者安装的版本与你的代码不兼容。你可以尝试重新安装 vue 模块,并确保版本与你的代码兼容。

    你的代码中使用了相对路径引用 vue 模块,但是这种相对路径引用方式在服务器环境中不被支持。你可以尝试使用绝对路径或者别名来引用 vue 模块,以避免这个问题。

    你的服务器环境中没有正确配置模块解析路径,导致无法正确解析 vue 模块的引用路径。你可以尝试检查服务器环境中的模块解析路径配置,并确保它们能够正确解析 vue 模块的引用路径。
    针对这个问题,你可以尝试以下几个解决方案:

    确认你的服务器环境中已经正确安装了 vue 模块,并且版本兼容。你可以使用 npm 或者 yarn 命令来安装 vue 模块,例如 npm install vue 或者 yarn add vue。

    尝试使用绝对路径或者别名来引用 vue 模块,例如 import Vue from '/node_modules/vue' 或者 import Vue from '@vue/runtime-dom'。

    检查服务器环境中的模块解析路径配置,确保它们能够正确解析 vue 模块的引用路径。你可以查看服务器环境中的 NODE_PATH 环境变量配置,或者使用 require.resolve 方法来查看模块的解析路径。如果需要,你可以手动设置 NODE_PATH 环境变量或者修改模块解析路径配置,以确保能够正确解析 vue 模块的引用路径。

    评论
  • CSDN-Ada助手 CSDN-AI 官方账号 2023-03-28 21:25
    关注
    • 这篇博客: vue2 项目接入 vite2 参考指南中的 2.Uncaught TypeError: Failed to resolve module specifier “vue”. Relative references must start with either “/”, “./”, or “…/”. 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    • 这个是打包后预览项目时控制台出现的错误,出现这个问题的原因是:Vite 不会重写从外部文件导入的内容,我们需要使用支持 ESM 编译的 CDN

      这里我们需要用到 https://esm.sh/ 这个网站,然后修改我们的 cdn 配置:

      import { injectHtml } from 'vite-plugin-html';
      
      export default defineConfig({
        plugins: [
          injectHtml({
            injectData: {
              cdn: [
                js: [
                  'https://esm.sh/vue@2.5.2',
                  // ...
                ],
              ],
            },
          }),
        ],
      });
      

      https://esm.sh/vue@2.5.2 返回的内容如下:

      /* esm.sh - vue@2.5.2 */
      export * from "https://cdn.esm.sh/v64/vue@2.5.2/es2021/vue.js";
      export { default } from "https://cdn.esm.sh/v64/vue@2.5.2/es2021/vue.js";
      

      另外,我们在挂载 <script> 标签上时,需要加上 type="module" 属性。

      参考文档:[Vue3] Vite中使用alias配置项从cdn中加载库文件

      另一种解决方法:升级 vue 版本,我选择将 vue 版本升到了 vue@2.6.14,也可解决此问题。

      造成此问题还可能是第三方 vue 插件导致,比如我使用了 el-table-infinite-scroll,版本 1.0.10。然后我选择将其替换掉,可解决此问题。

    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 4月7日
  • 已采纳回答 3月30日
  • 创建了问题 3月28日

悬赏问题

  • ¥30 矩阵分析与古诗词意境
  • ¥15 在win10 64位的vs打包MSI文件,放到win7 64位上安装成可执行exe文件后,点击程序不运行。
  • ¥50 大众点评用户浏览/消费记录爬虫
  • ¥15 求制作一个个人网页,
  • ¥15 寻涂色内存脚本作者有项目有市场有资源.却技术
  • ¥15 蓝桥杯c51单片机问题
  • ¥15 ajax跨域问题请求修改代码
  • ¥15 python matplotlib
  • ¥15 短信测压+语音,有偿,必须用Python
  • ¥20 COCOS2DX的protobuf协议注册函数问题