在子目录或子路径中部署 VueJS 应用

Question

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

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

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

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

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

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

对于资产，字体和其他仍指向子域 https://event.domain.net。

CSS 和 JS 指向路径/网络研讨会

资产，字体仍指向子域 https://event.domain.net/

安慰

Answer 1

使用 publicPath 的值作为应该有效的/webinar。

更多详情请点击此处 https://cli.vuejs.org/config/#publicpath

您甚至可以根据环境配置公共路径。

Answer 2

Sagar Rabadiya指出了正确的链接：

1. 在项目根目录(package.json所在的位置(中创建一个名为vue.config.js的文件。
2. 提示里面的以下代码片段：

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

并保存文件。

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