webpack 在子目录中部署VueJS App

huwehgph 于 2023-05-07 发布在 Webpack

关注(0)|答案(4)|浏览(157)

我在部署使用Webpack CLi构建的Vue JS应用程序时遇到问题。
如果上传到根目录中，一切都很好，但在子文件夹中，所有链接都会断开。
我添加了一个基本href：

<base href="/dist/">

脚本加载，但Webpack创建的所有资源路径都被破坏，图像和字体不会加载，因为它们指向根目录。
有人能帮忙吗？

4条答案

对于Vue CLI 3来说，这很简单。
编辑你的vue.config.js（如果没有，在项目根目录下创建）并添加以下行：

module.exports = {
  baseUrl: "./"
};

或者你想要的任何子目录。
你也可以根据NODE_ENV来决定。参见文档。

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

更新

正如下面的注解中所提到的，对于Vue CLI 3.3+，使用publicPath属性而不是baseUrl。

假设你使用的是vue-cli中的webpack模板，你需要编辑config/index.js中的assetsPublicPath属性-注意build和dev都有一个属性
查看文档中的Handling Static Assets部分以获取更多信息。

CLI v3+用户的更新链接：https://cli.vuejs.org/guide/html-and-static-assets.html
请注意，该属性仅称为publicPath

如果您的应用安装了
npm install -g @vue/cli vue ui然后你应该创建文件vue.config.js在顶部项目文件夹（package.json所在的地方）并像上面一样粘贴。

对于Vite搭建的Vue 3项目，编辑vite.config.js文件，添加/修改base属性如下：

export default defineConfig({
  /* ... */

  base: './',

  /* ... */
})