vue构建build时生成不带/根目录的发行代码版本

最新推荐文章于 2024-03-13 00:42:44 发布

原创最新推荐文章于 2024-03-13 00:42:44 发布 · 697 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

15 篇文章

订阅专栏

本文讲解了如何在Vue.js项目中使用vue.config.js文件来配置publicPath，以便于项目的资源文件能够正确引用，无论项目部署在服务器的哪个目录下。通过设置publicPath为空字符串或具体目录，可以使项目适应不同的部署环境。

在vue.config.js的对象中使用publicPath: “”，可以构造出不再/的对js文件的引用，这样就可以把代码放在任意的目录中，正常使用。

module.exports= {
  publicPath: "",
  devServer: {
      }
  }
}

在这里插入图片描述

publicPath: “/”，如果不显示式的配置出来，默认就是/根目录，生成的引用都带/
在这里插入图片描述

也可以放在某些具体的目录下：比如放在/some目录下。
生成的对文件的引用如下：
在这里插入图片描述
实际的目录结构如下，并不会把代码编译到一个some目录，/some只是对js文件的引用

dist/
├── css
│   └── app.beb24911.css
├── favicon.ico
├── img
│   └── logo.82b9c7a5.png
├── index.html
└── js
    ├── about.f4fd965f.js
    ├── about.f4fd965f.js.map
    ├── app.2e296958.js
    ├── app.2e296958.js.map
    ├── chunk-vendors.47b1b2b6.js
    └── chunk-vendors.47b1b2b6.js.map