如何通过vue.config.js将Vue.js项目部署到网站子目录

1. 核心配置vue.config.js #

修改项目根目录下的vue.config.js中的publicPath字段，该字段指定项目打包后资源加载的基础路径，和你要部署的子目录路径保持一致即可，建议加环境判断避免影响本地开发：

// vue.config.js
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  // 生产环境设置为目标子目录路径，开发环境保持根路径即可
  publicPath: process.env.NODE_ENV === 'production' ? '/sub-directory/' : '/',
  // 其余原有配置保持不变
})

配置参考图：

2. 路由配置同步（使用vue-router时需调整） #

如果项目接入了vue-router，需要同步修改路由的基础路径，和上面的publicPath保持一致：

vue-router 4.x（Vue3配套版本） #

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory('/sub-directory/'),
  routes: [/* 你的原有路由规则 */]
})
export default router

vue-router 3.x（Vue2配套版本） #

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: '/sub-directory/',
  routes: [/* 你的原有路由规则 */]
})

如果使用hash模式的路由，不需要修改路由配置，仅配置publicPath即可生效。

3. 打包部署 #

配置完成后执行打包命令：
npm run build
将打包生成的dist目录下的所有文件，上传到服务器对应站点的sub-directory目录下，访问abc.com/sub-directory即可正常访问项目。

注意事项 #

• publicPath和路由base的路径前后都需要保留斜杠，避免静态资源或路由路径加载错误
• 如果使用history模式路由，需要在服务器配置刷新 fallback 规则，避免直接访问子路由返回404，nginx 配置参考：

location /sub-directory {
  alias /www/server/path/sub-directory;
  try_files $uri $uri/ /sub-directory/index.html;
}

内容的提问来源于stack exchange，提问作者Farooq khan