Vue 修改部署目录

修改 vue.config.js 文件 publicPath 属性

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

引用 public 文件夹中的文件时，可以使用一下方法

当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀

- 使用绝对路径

<img src="/dist/img1.webp">

- 使用相对路径

// 相对路径
<img src="../../public/img1.webp">

- 在组件中传值

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

<img :src="`${publicPath}img1.webp`">

- 使用过滤器 # 过滤器

function pathJoin() {
  let path = ''
  for (let i = 0; i < arguments.length; i++) {
    if (isEmpty(arguments[i]) || arguments[i] === '/') {
      continue
    }
    if (!arguments[i].startsWith('/') && !arguments[i].startsWith('http')) {
      path += '/'
    }
    path += arguments[i]
  }
  return path
}
// 注册过滤器
Vue.filter('publicPath', function (value) {
  return pathJoin('/dist/',value)
})
// 在模板中使用过滤器
<img :src="'img1.webp' | publicPath">

- 注册 Vue 全局属性

// main.js
Vue.prototype.$_BASE_URL = /dist/

// App.vue
<img :src="`${$_BASE_URL}img1.webp`">

修改 Router 配置 base：

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})