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

Posted 2023-02-22

【中文标题】@vue/cli build dist/ 文件夹在托管为子目录时不呈现

【英文标题】：@vue/cli build dist/ folder doesn't render when hosted as a sub-directory

【发布时间】：2019-08-29 14:34:43

【问题描述】：

我正在使用@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 页面和错误消息。如果我将它托管在根目录中，该项目运行良好

【参考方案1】：

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

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

添加了以下内容：

module.exports = 
  publicPath: '/dist/'

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

【参考方案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 将如上所示生成。