使用lite-server时脚本重复执行、HTML注入异常的问题求助

核心问题分析 #

• 脚本执行两次：手动在src/index.html中添加的<script>标签与HtmlWebpackPlugin自动注入的脚本重复
• 图片路径错误+404：browser-sync默认会改写资源路径，给图片URL加上了browser-sync前缀，导致资源找不到

分步解决方案 #

1. 移除重复的脚本引入 #

打开src/index.html，删除手动添加的<script type="module" src="scripts.js"></script>标签。

原因：HtmlWebpackPlugin会自动将webpack打包生成的scripts.js注入到dist/index.html中，手动添加会导致脚本被加载两次。

2. 配置lite-server禁用browser-sync的资源路径改写 #

在项目根目录创建bs-config.json文件，添加以下配置：

{
  "server": {
    "baseDir": "./dist"
  },
  "rewriteRules": [
    {
      "match": /^\/browser-sync\/images\//,
      "replace": "/images/"
    }
  ],
  "injectChanges": false
}

• rewriteRules：将错误的/browser-sync/images/路径重写为正确的/images/
• injectChanges：禁用browser-sync自动注入变更的脚本，避免额外的资源干扰

3. 更新package.json的启动脚本 #

修改package.json中的start命令，指定使用自定义配置文件：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "lite-server --config bs-config.json",
  "build": "webpack"
}

4. 补全scripts.ts中缺失的图片元素创建代码 #

你的scripts.ts片段中缺少图片元素的创建逻辑，补充后才能正确插入图片：

import $ from 'jquery';
import logoImage from './img/logo.png';
import logoMedicine from './img/medicine.png';

$(function(){
  // 创建logo图片元素
  const imgElement = new Image();
  imgElement.src = logoImage;
  
  // 创建药品图片元素
  const medicineImage = new Image();
  medicineImage.src = logoMedicine;

  document.getElementsByClassName('logo-container')[0]?.appendChild(imgElement);
  document.getElementById('rx_img')?.appendChild(medicineImage);
});

验证步骤 #

1. 重新执行npm run build打包项目
2. 执行npm start启动lite-server
3. 检查浏览器控制台：脚本不再重复执行，图片资源加载正常，无404错误

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