vue.js 子目录运行

Vue.js 是一种流行的前端 JavaScript 框架，用于构建用户界面和单页应用程序。在 Vue.js 项目中，有时你可能希望将应用部署到一个子目录下，而不是根路径。以下是关于如何在子目录下运行 Vue.js 应用的基础概念和相关步骤：

基础概念

子目录部署：指的是将整个 Vue.js 应用部署到一个服务器上的特定子路径下，例如 http://example.com/my-app/。

相关优势

• 组织结构清晰：有助于将不同应用或项目分开管理。
• 资源共享：可以在同一域名下共享某些资源，如图片、样式表等。
• 安全性：通过限制访问特定子目录，可以提高应用的安全性。

类型与应用场景

• 静态网站：适用于所有类型的 Vue.js 应用。
• 动态内容：结合后端服务，可以实现更复杂的应用逻辑。

遇到的问题及解决方法

问题：Vue.js 应用在子目录下运行时，路由出现问题。

原因：默认情况下，Vue Router 假设你的应用位于根路径 /。如果部署到子目录，所有路由都会相对于这个子目录。

解决方法：

1. 修改 publicPath： 在 vue.config.js 文件中设置 publicPath 为你的子目录路径。
2. 修改 publicPath： 在 vue.config.js 文件中设置 publicPath 为你的子目录路径。
3. 配置 Vue Router： 如果使用的是 Vue Router 的 history 模式，需要在创建路由实例时指定 base 选项。
4. 配置 Vue Router： 如果使用的是 Vue Router 的 history 模式，需要在创建路由实例时指定 base 选项。

示例代码

假设你有一个简单的 Vue.js 应用，并且你想将其部署到 http://example.com/my-app/。

项目结构：

my-vue-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── vue.config.js
└── router.js

vue.config.js：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/'
}

router.js：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', component: () => import('./components/HelloWorld.vue') }
]

const router = createRouter({
  history: createWebHistory('/my-app/'),
  routes
})

export default router

main.js：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

总结

通过在 vue.config.js 中设置 publicPath 和在 Vue Router 中指定 base 路径，可以确保 Vue.js 应用在子目录下正确运行。这样配置后，无论是开发环境还是生产环境，应用都能正确处理路由和资源加载。