在子目录或子路径中部署 VueJS App答案

【问题标题】：Deploy VueJS App in a sub-directory or sub-path在子目录或子路径中部署 VueJS App
【发布时间】：2020-09-21 18:41:15
【问题描述】：

我在部署使用 Webpack CLi 构建的 Vue JS 应用时遇到问题。

如果上传到根目录一切正常，但在子文件夹中，所有链接都会中断。

我想将 VueJS 应用程序部署到这个 url： https://event.domain.net/webinar

我在 vue.config.js 中添加了 publicPath ：

var path = require(‘path’)
module.exports = {
   publicPath: ‘./’
}

但只有 css 和 js 文件夹指向路径 /webinar。

对于资产、字体等仍指向子域https://event.domain.net。

【问题讨论】：

【解决方案1】：

Sagar Rabadiya 为您指出了正确的链接：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'? '/your-sub-directory/' : '/'
}

并保存文件。

打开终端并导航到您的项目，然后运行 npm run build 以从中生成生产版本。
生成生产版本后，复制其中的内容并将其粘贴到您在根文件夹中创建的子目录中。例如，如果您使用 Apache，则默认根目录是 htdocs 文件夹。我还在服务器上创建了一个虚拟主机，也许你也需要这样做。
打开浏览器并输入您的子目录所在的地址。例如：http://your-server-url:your-port/your-sub-directory/ 您现在应该可以看到您的应用了。

【讨论】：

【解决方案2】：

使用 publicPath 的值作为 /webinar 应该可以工作。

您甚至可以根据环境配置 publicPath。

【讨论】：