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

Posted

技术标签:

【中文标题】如何从构建的 Vue 项目中更改路径结构?【英文标题】:How to change the path structure from built Vue project? 【发布时间】:2021-08-17 13:21:12 【问题描述】:

所以我有一个使用方便的 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'
  ]

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

提前致谢。

【问题讨论】:

Babel 不是使用构建项目的捆绑器。如果你在使用 Vue CLI,你仍然在使用 webpack。您想要更改 publicPath 使其指向 ./ 或您拥有的任何绝对自定义路径:cli.vuejs.org/config/#publicpath @Terry 我找不到任何 vue.config.js 文件,这是我的项目结构:gyazo.com/eda6f0b99f2849272d1ebedb9fdd3a1a 我的 package.json 文件中也没有 vue 字段 【参考方案1】:

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

module.exports = 
  publicPath: './'

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

【讨论】:

我用这段代码创建了文件并构建了项目,结果与i.gyazo.com/77903578ce4b98042574f1fa034e83ba.png路径相同 好吧,我不得不做有史以来最愚蠢的事情,我想知道为什么 publicPath: '' + './' + './' 它适用于这个

以上是关于如何从构建的 Vue 项目中更改路径结构?的主要内容,如果未能解决你的问题,请参考以下文章

如何更改代理构建目录?

如何让 DOM 呈现对 VUE.js 项目中计算数据的更改

如何更改iOS文件的路径以显示项目路径

nginx 部署 多个vue项目 端口代理配置问题

vue项目打包图片路径错误

如何在 bootstrap-vue 切换按钮中更改背景颜色