如何在Vite项目中启用Shoelace图标并访问node_modules中的资产？

嘿，我之前也遇到过这个问题！Shoelace的图标在Vite里不显示，本质上是因为Vite默认不会把node_modules里的静态资产（比如Shoelace的图标文件）自动打包到输出目录里，而且Shoelace不知道去哪里找这些图标。别担心，几步就能搞定：

第一步：配置Vite复制Shoelace的静态资产 #

首先我们需要把Shoelace打包在node_modules里的图标等资产复制到Vite的输出目录中，这里推荐用vite-plugin-static-copy插件来做，既简单又可靠。

先安装插件：

npm install vite-plugin-static-copy --save-dev

然后修改你的vite.config.js文件，添加插件配置：

import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        {
          // 匹配Shoelace的所有资产文件
          src: 'node_modules/@shoelace-style/shoelace/dist/assets/**/*',
          // 复制到输出目录的shoelace/assets文件夹下
          dest: 'shoelace/assets'
        }
      ]
    })
  ],
  // 开发模式下允许Vite访问node_modules目录，避免开发时的路径问题
  server: {
    fs: {
      allow: ['node_modules']
    }
  }
});

第二步：告诉Shoelace资产的位置 #

接下来需要在你的应用入口文件（比如src/main.js或者组件的入口文件）里，设置Shoelace的基础路径，让它知道去哪里找图标：

import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';

// 这里的路径要和刚才Vite配置的dest路径对应，因为打包后这些资产会在根目录的shoelace/assets下
setBasePath('/shoelace/assets');

第三步：正常使用图标 #

现在你就可以像之前一样在组件里使用Shoelace图标了，比如：

import '@shoelace-style/shoelace/dist/components/icon/icon.js';

// ...

render() {
  return html`
    <sl-icon name="0-circle-fill"></sl-icon>
  `;
}

这样图标应该就能正常显示啦！

关于通用问题：如何让node_modules中的资产在Vite中可访问？ #

刚才的方法是针对Shoelace的，不过通用来说，处理node_modules里的静态资产有两种场景：

• 开发模式：可以通过Vite的server.fs.allow配置，让Vite允许访问node_modules目录，这样你可以直接在代码里引用node_modules里的资源路径，但注意这种方式只适合开发，生产构建时这些文件不会被打包到输出目录。
• 生产模式：必须使用复制类插件（比如刚才的vite-plugin-static-copy），把需要的资产复制到输出目录，然后在代码中引用复制后的路径，这样生产环境才能正确加载这些资源。
• 另外也可以用Vite的resolve.alias设置别名，简化引用路径，但核心还是要处理资产的复制问题，确保生产环境能访问到。

备注：内容来源于stack exchange，提问作者ejoubaud