解决vue cli3执行npm run build后dist目录下index.html无法加载问题

最新推荐文章于 2024-08-21 10:07:46 发布

原创最新推荐文章于 2024-08-21 10:07:46 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue-cli3

本文介绍了解决Vue CLI 3在执行npm run build后，dist目录下index.html文件加载失败的问题。通过修改options.js中的publicPath配置，将其设置为相对路径'./'，确保项目可以在任意路径下正确部署。

解决vue cli3执行npm run build后dist目录下index.html无法加载问题

官网中讲到：

在这里插入图片描述

解决方案：

1、找到options.js，路径：node_modules/@vue/cli-service/lib/options;
2、往下翻，找到 exports.defaults 对象中的 publicPath，此时默认值为：' / '；
3、将值改为：

/**
* 1、模式为 production 时，加载项目的路径为 ' ./ '(相对路径)
* ，照官网文档原话：这样打出来的包可以被部署在任意路径)，且不
* 会影响到开发模式的 devServer（即使用 npm run dev 运行的模式）
*/
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/'