nodejs工程项目中的package.json下，如何解决基于file标签引入本地工程下的切换目录的引用的路径报错问题？

Question

windows上 npm nodejs，假设一个业务工程，引入两个本地工具库工程，这三个工程的上级都是同一个文件夹 .

我做如下操作
1、D:\workspace\vue，用vscode打开业务工程，在终端运行npm i 运行npm dev，打开网页没有问题，没有出现， Failed to resolve import "xxx" from "..\xxx\……". Does the file exist? 之类的错误，

"vue_lib1": "file:../vue_lib1",
    "web_base1": "file:../web_base1"

2、现在我把三个都剪切移动到D:\workspace\qd_workspace，然后把业务工程的node_modules和package-lock.json删除

用vscode打开业务工程，在终端运行npm i 然后运行npm dev，打开网页会出现问题，诸如 Failed to resolve import "xxx" from "..\xxx\……". Does the file exist? 之类的错误，也就是本地库资源引用方面的路径方面的引用都提示报错.

这些引用，要么来自vue_lib1 import { xxx } from "vue_lib1";，要么来自web_base1 要么来自web_base1 import { xxx } from "web_base1";

3、如果剪切回到 D:\workspace\vue，业务工程的node_modules和package-lock.json删除，用vscode打开业务工程，在终端运行npm i 运行npm dev，打开网页没有问题，没有出现， Failed to resolve import "xxx" from "..\xxx\……". Does the file exist? 之类的错误

4、为什么会这样，我确定路径没有问题，我以为是不是node_modules和package-lock.json缓存了什么绝对路径，但删除重新npm i，再打开测试也还是同样的本地库方面的路径引用错误。

npm cache verify 和npm cache clean --force 也尝试了，再npm i 切换到新目录，打开网页运行，本地库资源引用方面的路径方面的引用都报错

业务工程的package.json文件：

"name": "vue_test",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite --host 0.0.0.0",
        "build": "vite build",
        "preview": "vite preview"
    },
    "dependencies": {
        "axios": "^1.3.4",
        "element-plus": "^2.13.0",
        "vue": "^3.2.45",
        "vue-cookies": "^1.8.2",
        "vue-i18n": "^9.14.4",
        "vue-router": "^4.1.6",
        "vue_lib1": "file:../vue_lib1",
        "web_base1": "file:../web_base1"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.0.0",
        "consola": "^2.15.3",
        "vite": "^4.1.0",
        "vite-plugin-style-import": "^2.0.0"
    },

业务工程的vite.config.js文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { join,resolve  } from "path";
import { createStyleImportPlugin, VxeTableResolve, ElementPlusResolve } from 'vite-plugin-style-import'
import path from 'path';

export default defineConfig({
   
    plugins: [

        vue(),
    ],
    resolve: {
        alias: {
            '@': join(__dirname, "src"),
            //  '@': resolve(__dirname, "src")
           
        },
    }
})

本地工具库工程的package.json

{
  "name": "vue_lib1",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "files": [
    "dist",
    "index.d.ts"
  ],
  "main": "lib/main.js",
  "module": "lib/main.js",
  "exports": {
    ".": {
      "import": "./lib/main.js",
      "require": "./lib/main.js"
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "link": "npm link"
  },
  "devDependencies": {
    "vite": "^5.0.10"
  },
  "dependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "axios": "^1.7.2",
    "element-plus": "^2.7.6"
  }
}

Answer 1

因为你在浏览器端使用了服务器端的默认引用导致的，需要配置你的vite.config.js：

export default defineConfig(({ mode }) => {
  resolve: {
    // alias: {
      // '@': resolve(__dirname, 'src'),
      // 'inherits': 'inherits/inherits_browser.js', // 这里看情况是否开启
    // },
    // 配置模块解析，优先兼容浏览器，再优先使用ES模块
    mainFields: ['browser', 'module', 'jsnext:main', 'main'],
  }
})

第三方包现在都提供了多种选择, 第三方包package.json：

{
    "main": "cjs/index.js",
      "module": "esm/index.js",
      "browser": "esm/index.js",
}

但如果你默认引用的都走的是main，因此会导致某些包打包正确但在浏览器那边访问不通过。所以需要指定优先使用browser支持浏览器即可。

如果还有问题就需要排查

Answer 2

测试思否的ai Bot尝试提供其中的以下方法，得到解决。

思否的ai Bot提供的方法 2：修改 Vite 配置别名（强制路径解析）
在业务工程中的 vite.config.js，手动指定模块绝对路径

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
 alias: {
   // 手动指定模块绝对路径
   'vue_lib1': path.resolve(__dirname, '../vue_lib1'),
   'web_base1': path.resolve(__dirname, '../web_base1')
 }
  }
})

安装 path 依赖（若报错）：

npm install --save-dev @types/node
删除 node_modules 和 package-lock.json，重新运行 npm i && npm dev。

排除验证

新建一个vite的测试项目，引入vue_lib1和web_base1.

通过新建测试的vite工程进行测试，在app.vue添加
import { xxx} from "vue_lib1"; 打开网页没有问题
再添加
import {yyy} from "web_base1" 打开网页就有路径报错的问题，经过排除，是因为web_base1内部也通过file的相对路径，引用了vue_lib1。web_base1工程里的里面的import { xxx} from "vue_lib1"，导致报错
经过千文ai的分析，在vite.config.js 配置别名 'vue_lib1': path.resolve(__dirname, '../../xxx/vue_lib1'),不报错的原因是

“无论谁（主工程、web_base1、任何子模块）写 import ... from 'vue_lib1'，都统一指向这个绝对物理路径。”