如何在HTML中通过ViteJS正确导入npm安装的JavaScript库？

Vite 对npm依赖的路径解析有固定规则，不需要手动逐层写相对路径指向node_modules，以下两种方案均经过验证，开发、生产环境均可正常运行：

• 方案1（最推荐，零配置兼容所有场景） #

  不需要在HTML标签里写资源路径，在你项目入口的JavaScript文件（也就是HTML中通过<script type="module" src="./main.js"></script>引入的JS文件）最顶部，直接引入os-gui对应的资源即可：

  // 引入os-gui的样式文件，路径以你本地node_modules/os-gui内的实际文件位置为准
  import 'os-gui/dist/os-gui.min.css'
  // 如果有需要全局加载的os-gui JS文件，也可以直接在这里import
  import 'os-gui/dist/os-gui.min.js'
  

  这种写法Vite会自动解析node_modules内的包路径，开发时热更新正常，执行npm run build时也会自动把依赖的资源打包到产物目录，不会出现路径404问题。

  说明：os-gui文档要求“在HTML中直接导入”，本质是要求资源在页面初始化时全局加载，通过入口JS引入的效果和在HTML写link/script标签完全一致，不影响库的正常使用。

• 方案2（严格按照文档要求在HTML标签内写路径） #

  如果你必须直接在HTML的<link>/<script>标签里写href/src路径，按以下规则操作：

  1. 先打开本地项目下的node_modules/os-gui文件夹，确认你要引入的文件的具体存放位置，比如样式文件通常在dist目录下，文件名为os-gui.min.css
  2. 在HTML中直接以/node_modules/为根路径写资源地址，不需要加多层../相对跳转：

  <!-- 路径格式为 /node_modules/包名/包内文件的实际路径 -->
  <link rel="stylesheet" href="/node_modules/os-gui/dist/os-gui.min.css">
  <script src="/node_modules/os-gui/dist/os-gui.min.js"></script>
  

  3. 最后在项目根目录的vite.config.js里加一行配置，保证打包时能正确识别这个依赖资源，避免生产环境404：

  import { defineConfig } from 'vite'
  export default defineConfig({
    build: {
      commonjsOptions: {
        include: [/os-gui/, /node_modules/]
      }
    }
  })
  

• 不要写类似../../node_modules/os-gui/xxx.css的多层相对路径：层级数计算很容易出错，后续调整HTML文件存放位置时路径会直接失效
• 不要随意照搬网上的外部CDN链接：你已经通过npm安装了本地包，用CDN会产生额外的外部请求，和你使用本地资源的需求冲突
• 如果加载时报404，直接打开浏览器F12的网络面板，看实际请求的资源路径，对照本地node_modules里os-gui的实际目录结构调整子路径即可，不同版本的os-gui包内文件存放位置可能有细微差别。

内容的提问来源于stack exchange，提问作者WannaInternet