Vue.config文件里边的publicPath的配置使用

作者：System 时间：2024年08月08日分类：所有,vue.js 字数：666

publicPath 是 Vue CLI 项目中 vue.config.js 文件的一个配置选项，用来指定项目中静态资源的基本路径。

例如，如果你的应用被部署在一个子路径下，例如 https://www.example.com/app/，你需要将 publicPath 设置为 /app/。

下面是一个简单的 vue.config.js 配置文件，其中设置了 publicPath：




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

在这个配置中，如果 NODE\_ENV 环境变量是 'production'，则 publicPath 被设置为 '/production-sub-path/'，这通常用于生产环境。在开发环境中，它默认为 '/'，通常不需要设置。

确保在你的 Vue 应用中引用资源时使用相对路径，这样它们会根据 publicPath 的配置进行正确的引用。例如：




<img src="/img/logo.png">

在上述配置中，即使你的应用被部署在一个子路径下，上述图片标签也会正确地引用 https://www.example.com/app/img/logo.png。