作为子目录托管时，@ vue / cli build dist / folder不会呈现

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页面和错误消息。如果我在root中托管它，该项目运行正常

Answer 1

nvm ......现在正在工作......

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

添加以下内容：

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

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