如何从构建的 Vue 项目中更改路径结构？

Question

所以我有一个使用方便的 vue ui 命令创建的 Vue 项目。 package.json 在 dist 文件夹中有编译项目的构建脚本。

我面临的一个问题是 index.html 文件以这种方式引用 js 和 css 文件：

<link href="/js/app.66f30e0a.js" rel="preload" as="script">
<link href="/js/chunk-vendors.410e1ec5.js" rel="preload" as="script">
<link href="/css/app.20c14d91.css" rel="stylesheet">
<script src="/js/chunk-vendors.410e1ec5.js"></script>
<script src="/js/app.66f30e0a.js"></script>

但由于我将这些文件放在上面的软件，我需要它这样做：

<link href="./js/app.66f30e0a.js" rel="preload" as="script">
<link href="./js/chunk-vendors.410e1ec5.js" rel="preload" as="script">
<link href="./css/app.20c14d91.css" rel="stylesheet">
<script src="./js/chunk-vendors.410e1ec5.js"></script>
<script src="./js/app.66f30e0a.js"></script>

所以基本上在路径之前添加句点字符。

我知道这可以使用 webpack 以某种方式更改，但这是使用 babel 并且我在项目配置方面完全是新手。 这是现在的 babel.config.js 文件：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

为了获得我想要的路径结构，我需要添加/更改什么？

提前致谢。

Answer 1

您只需将vue.config.js 文件添加到您的项目根目录中，并在如下内容中添加：

module.exports = {
  publicPath: './'
}

如需进一步阅读，请参阅Vue cli docs。