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

Question

So I have a Vue project created with the handy vue ui command. package.json has the build script to compile the project in the dist folder.

An issue I'm facing is that the index.html file references to js and css files this way:

<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>

But I need it to do it this way because of the software I'm putting these files on:

<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>

So basically adding the period character before the path.

I know this can be changed somehow using webpack, but this is using babel and I'm a total novice in terms of project config. This is the babel.config.js file right now:

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

What would I need to add/change in order to get the path structure I want?

Thanks in advance.

Answer 1

You just need to add a vue.config.js file into your project root, and inside something like:

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

For further reading, see the Vue cli docs .