Windows10下Vue.js+Webpack2项目html-webpack-plugin路径格式错误求助

这个问题在Windows环境下用Webpack构建时很常见——系统默认用反斜杠做路径分隔符，但网页资源引用必须用正斜杠。你只需要给Webpack加个简单配置就能搞定：

具体修改步骤 #

1. 打开你的Webpack配置文件（通常是webpack.config.js）
2. 在output配置项里添加publicPath: '/'，完整示例如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 其他配置（入口、模块规则等）保持不变
  output: {
    path: path.resolve(__dirname, 'dist'), // 确保用path.resolve生成绝对输出路径
    filename: 'js/main.js',
    publicPath: '/' // 关键配置：强制资源引用使用正斜杠
  },
  plugins: [
    new HtmlWebpackPlugin({ 
      filename: "index.html", 
      template: "src/html/index.html", 
      inject: true, 
      chunksSortMode: "dependency" 
    })
  ]
};

原理说明 #

• Windows系统默认用反斜杠\作为路径分隔符，但网页的URL路径规范要求用正斜杠/
• publicPath是Webpack的核心配置，用于指定输出资源的公共基础路径，HtmlWebpackPlugin会完全遵循这个配置生成资源引用路径
• 设置publicPath: '/'后，所有生成的脚本、样式引用都会自动使用正斜杠格式，也就是你想要的<script type="text/javascript" src="/js/main.js"></script>

如果你的项目区分开发/生产环境，记得在对应的环境配置文件里都加上这个publicPath设置，避免环境不一致导致的路径问题。

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