Question

我正在使用@vue/cli / vue version 3.5.5创建一个简单的2页网站。

到目前为止，当我使用npm run serve在本地运行网站，然后使用npm run build创建我的dist /文件夹时。

当我将文件从dist /文件夹添加到主机的根目录并访问http://www.my-website.com上的生产环境时，页面将呈现并正常运行。

但是，我想将应用程序托管在子目录中，但是由于index.html不会呈现，这会弄乱路由。访问http://www.my-website.com/dist时：index.html返回为空白，并在控制台中显示错误消息：

app.a1183de6.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

chunk-vendors.ff22d1fb.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

about.ad763791.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

app.a1183de6.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

提供背景信息，包括您已经尝试过的内容

我花了数小时的时间进行搜索，最常见的事情是创建一个vue.config.js文件，并将根路径改为子目录

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/dist/'
    : '/'
}

我也尝试过此方法，但是它不起作用：

// module.exports = {
// publicPath:' /dist/ '
// }

我按照指示将vue.config.js文件放在项目文件夹的根目录下，但似乎在npm run build上被忽略了

描述预期和实际结果：

我想将我的vue-app呈现在子目录中，例如：

http://www.website.com/dist

但是现在，当我将项目托管在子目录中时，控制台中会出现空白的index.html页面和错误消息。如果我将其托管在根目录中，项目将运行正常

Answer 1

nvm ...它现在正在工作...。

在项目的根目录中创建：vue.config.js

添加了以下内容：

module.exports = {
  publicPath: '/dist/'
}

运行npm run build后，js和css文件的路径现在包含子目录

Answer 2

即使未在分发文件夹下创建特定文件夹，也会发生此错误。在这种情况下，请参见以下解决方案：

默认情况下，index.html是使用链接标记生成的，如下所示：

<link href=/js/chunk-vendors.2f2d9c51.js rel=preload as=script>

在开头添加不必要的斜杠，以便其尝试在错误的路径中搜索js和css文件。您实际上需要像以下这样：

<link href=js/chunk-vendors.2f2d9c51.js rel=preload as=script>

没有前导斜杠字符。

前导斜杠'/'表示该路径是根目录的绝对路径，而不是当前目录。

要修复此问题，只需将 vue.config.js 文件添加到您的vue项目中，其中包含以下代码：

module.exports = {
    publicPath: ''
};

这将确保如上所示生成index.html。

托管为子目录时，@ vue / cli build dist /文件夹不呈现

2 个答案: