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

Question

我正在使用 @vue/cli/vue 版本 3.5.5 制作一个简单的 2 页网站。

到目前为止一切顺利，当我使用 npm runserve 在本地运行网站，然后使用 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文件的路径现在包含子目录