在子目录中部署 VueJS App [英] Deploy VueJS App in a subdirectory

问题描述

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

I'm experiencing problems deploying a Vue JS app built using the Webpack CLi to work.

如果上传到根目录，一切都会好起来，但在子文件夹中，所有链接都会中断.

If uploaded in a root directory everything renders fine, but inside a subfolder, all the links break.

我添加了一个基本的 href:

I've added a base href:

    <base href="/dist/">

脚本加载了，但是Webpack创建的所有资源路径都被破坏了，图像和字体没有加载，因为它们指向根目录.

And the scripts load, but all the asset paths created by Webpack are broken, the images and fonts don't load as they are pointing to the root directory.

有人可以帮忙吗?

推荐答案

假设您使用的是 vue-cli 中的 webpack 模板，您需要编辑 config/index.js - 注意有一个 build 和 dev

Assuming you are using the webpack template from vue-cli, you need to edit the assetsPublicPath property in config/index.js - notice there is one for build and for dev

查看文档中的处理静态资产部分了解更多信息.

Check out Handling Static Assets section in the docs for more info.

CLI v3+ 用户的新链接:https://cli.vuejs.org/guide/html-and-static-assets.html

Newer link for CLI v3+ users: https://cli.vuejs.org/guide/html-and-static-assets.html

注意该属性只是被称为 publicPath

Notice the property is just called publicPath

这篇关于在子目录中部署 VueJS App的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！