vue部署到GitHub pages后，怎么可以实现链接后面不用加dist直接访问

Question

vue部署到GitHub pages后，怎么可以实现链接后面不用加dist直接访问
我的vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',
  chainWebpack: (config) => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', (config) => {
      config.entry('app').clear().add('./src/main-prod.js')

      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        lodash: '_',
        'vue-quill-editor': 'VueQuillEditor'
      })

      config.plugin('html').tap((args) => {
        args[0].isProd = true
        return args
      })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', (config) => {
      config.entry('app').clear().add('./src/main-dev.js')

      config.plugin('html').tap((args) => {
        args[0].isProd = false
        return args
      })
    })
  }
})

现在访问需要http://x.github.io/%E4%BB%93%E5%BA%93%E5%90%8D/dist
怎么样才可以直接使用http://x.github.io/仓库名访问，现在不加dist显示的是Project setup界面
我自己想过把除dist文件删除然后再把dist里的文件拿出来，可是这不方便我后续的修改提交，请问还有其他方法吗，是我哪个路径配错了吗

Answer 1

Vue应用在部署到Github Pages上时，如果直接使用默认的部署配置，那么最终访问的链接地址会包含一个“dist”路径，为了去掉这个路径，可以通过做如下配置：

1. 在vue.config.js文件中添加如下代码：

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/<repository-name>/'
        : '/'
}

其中<repository-name>是指在Github上创建的仓库名称。

1. 将publicPath的值设为'/'。

2. 在Github Pages设置中将Source选项设置为master branch。

这样，将Vue应用部署到Github Pages之后，访问链接后面就不需要加dist了，而直接访问Github Pages链接即可。