Vue2项目打包出现空白页面或js解析失败问题

2024.10.25今天我解决了vue2项目打包js文件会变成html类型的问题，原因是因为资源解析失败，问题如下：

解决办法主要是修改config.js文件的 publicPath要用相对路径，也就是'./'，特别注意不要用'/'

代码如下：

const path = require("path")

module.exports = {
    //要用相对路径，特别注意不要用'/'，不然资源就会解析失败
    publicPath: "./",
    // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
    outputDir: "dist",
    // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
    assetsDir: "static",
    lintOnSave: process.env.NODE_ENV === "development",
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    productionSourceMap: false,
    devServer: {
        host: '192.168.2.xxx',
        port: 8080,
        // open: true,
        proxy: {
           
        },
    },
    css: {
        loaderOptions: {
            sass: {
                sassOptions: {outputStyle: "expanded"},
            },
        },
    },
}

灵感来自于：

vue2.0打包空白页面问题_publicpath 配置二级页面以后 页面index空白-CSDN博客