Vue应用部署至网站子目录：如何修改Webpack构建路径

Hey there, let's get this sorted out for you! Since you mentioned it's a simple Vue app, I'm assuming you're using either Vue CLI or Vite (the two most common build setups for Vue these days). Let's break down exactly what you need to adjust depending on your tooling:

If you're using Vue CLI #

1. Set the correct publicPath in vue.config.js
   If you don't have a vue.config.js file in your project root, create one first. Then add the publicPath property pointing to your subdirectory—make sure to include leading and trailing slashes for consistency:

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

   This tells Webpack (under the hood of Vue CLI) to prefix all asset paths with your subdirectory instead of the root /.

2. Adjust Vue Router (if you're using it)
   If your app uses Vue Router, you need to set the base option when initializing the router to match your subdirectory:

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import routes from './routes'
   
   Vue.use(VueRouter)
   
   const router = new VueRouter({
     base: '/subdirectory/', // Match your publicPath here
     mode: 'history',
     routes
   })
   
   export default router
   

3. Deploy correctly
   After running npm run build, take all the files from the generated dist folder and upload them directly into your server's subdirectory folder (not nested inside another folder within subdirectory).

If you're using Vite #

Vite uses base instead of publicPath, so the steps are slightly different:

1. Set the base property in vite.config.js
   Add or modify the base option to point to your subdirectory:

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig({
     plugins: [vue()],
     base: '/subdirectory/'
   })
   

2. Update Vue Router configuration
   For Vue 3 + Vue Router 4, set the history base to match your subdirectory:

   import { createRouter, createWebHistory } from 'vue-router'
   import routes from './routes'
   
   const router = createRouter({
     history: createWebHistory('/subdirectory/'), // Match your Vite base here
     routes
   })
   
   export default router
   

3. Deploy the dist folder contents
   Just like with Vue CLI, upload everything from the dist folder directly into your server's subdirectory.

Common Pitfalls to Check #

• Don't forget trailing slashes: Omitting the trailing slash (e.g., '/subdirectory' instead of '/subdirectory/') can cause unexpected path issues with assets.
• Relative vs absolute asset paths: If you're referencing static assets in your components (like images), use relative paths (e.g., ../assets/image.png) or place them in the public folder and reference them with the subdirectory prefix (e.g., '/subdirectory/image.png').
• Test locally first: To avoid deployment surprises, test your build locally with a server that simulates the subdirectory. For example, using serve:

  serve -s dist -l 3000 --prefix subdirectory
  

  Then visit http://localhost:3000/subdirectory to verify everything loads correctly.

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