多工作区场景下Svelte项目无法加载静态图片与脚本的配置问题咨询

核心逻辑说明 #

Svelte技术栈本身不内置jQuery，所有自定义静态资源（JS、PNG等）的加载规则完全由你当前运行项目的打包工具配置决定，多工作区场景下每个端口对应的服务只会托管自身配置的静态资源目录内的文件，跨目录/根目录存放的文件不会被当前服务识别。

具体操作步骤 #

1. 确认Svelte 2项目（对应8082端口）的静态资源目录

• 若使用Vite打包：默认静态资源目录为Svelte 2项目自身根目录下的public文件夹
• 若使用SvelteKit：默认静态资源目录为Svelte 2项目自身根目录下的static文件夹
• 若使用自定义Rollup/Webpack打包：查找对应项目打包配置文件中的静态资源托管字段（如Webpack的devServer.static、Vite的publicDir），确认配置的托管目录路径

2. 存放静态资源
   将jquery-3.6.0.min.js、chessboard-1.0.0.js、logo.png所有需要引入的静态资源，全部放到上一步确认的Svelte 2项目专属静态资源目录内。

3. 修改引入路径
   不要使用./、../开头的相对路径（相对路径会随页面路由变化导致资源寻址错误），统一使用/开头的绝对路径：

<svelte:head>
    <script src="/jquery-3.6.0.min.js"></script>
    <script src="/chessboard-1.0.0.js" on:load={chessLoaded}></script>
</svelte:head>

<main>
    <img src="/logo.png" alt="logo"/>
    <h1>Svelte Pod 2</h1>
</main>

可选优化（jQuery引入） #

如果不想将jQuery作为静态资源引入，也可以通过npm安装后直接在组件内导入：

• 执行命令：npm install jquery
• 在Svelte组件的<script>标签内添加：import $ from 'jquery'，无需再写到svelte:head中

验证方法 #

配置完成后重启8082端口的服务，直接访问http://localhost:8082/chessboard-1.0.0.js，若能正常返回JS文件内容则配置生效。

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