【vue3项目部署到服务器上】

最新推荐文章于 2025-02-23 15:00:00 发布

常乐-

最新推荐文章于 2025-02-23 15:00:00 发布

阅读量842

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_70947033/article/details/129354712

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

在Vue3项目部署到服务器时，路由配置需使用createWebHashHistory，而非createWebHistory。文章强调了哈希模式对于服务器部署的重要性，并提供了创建路由器的示例代码，包括首页、登录和注册页面的路由设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3项目部署到服务器上

路由下面的index.js

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import index from '../views/index.vue'
const routes = [{
        path: '/',
        name: 'index',
        component: index,
        children: [{
                path: 'home', //首页
                name: 'home',
                component: () =>
                    import ('../views/home.vue')
            },
        ]
    },
    {
        path: '/login',//登录
        name: 'login',
        component: () =>
            import ('../views/login.vue')
    },
    {
        path: '/register', //注册
        name: 'register',
        component: () =>
            import ('../views/register.vue')
    }, 
]

const router = createRouter({
    history: createWebHashHistory(process.env.BASE_URL),
    routes
})
export default router

路由要部署到服务器上的话,需要注意的是,
必须是哈希模式,不能是历史模式.
记得导入createWebHashHistory,不然,不成功
在这里插入图片描述