如何从 url vue 中删除 /#/答案

【问题标题】：How to remove /#/ from the url vue如何从 url vue 中删除 /#/
【发布时间】：2021-12-05 20:42:30
【问题描述】：

我在 vue 中工作，查看页面时链接显示如下：

http://localhost:8080/#/

http://localhost:8080/#/categorias

如何删除它？

所以它看起来像这样？

http://localhost:8080/categorias
http://localhost:8080/

这是我的 js 路由器

import { createRouter, createWebHashHistory } from 'vue-router'
//import Home from '../views/Home.vue'
import Inicio from '../components/Inicio.vue'
const routes = [
  {
    path: '/',
    name: 'inicio',
    component: Inicio
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/categorias',
    name: 'Categorias',

    component: () => import(/* webpackChunkName: "about" */ '../components/Categorias.vue')
  },
  {
    path: '/login',
    name: 'Login',

    component: () => import(/* webpackChunkName: "about" */ '../components/Login.vue')
  }

]


const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

感谢您的帮助，谢谢，因为我无法解决它，并且以这种方式拥有该网址很不舒服：D

【问题讨论】：

这能回答你的问题吗？ Vue webpack is adding #/ to all URLs
@zero298 是的，我已经看过了，但它对我不起作用。
@zero298 这个问题只与 Vue 2 和 Vue Router 3 相关
我的“错误”是在导入您提到的问题中没有的东西。
import { createRouter, createWebHistory } from 'vue-router' vs import { createRouter, createWebHashHistory } from 'vue-router'

标签： vue.js

【解决方案1】：

使用createWebHistory (HTML5 Mode) 代替createWebHashHistory (Hash Mode)

import { createRouter, createWebHistory } from 'vue-router'
...
const router = createRouter({
  history: createWebHistory(),
  routes
})

【讨论】：

【解决方案2】：

vue

import VueRouter from 'vue-router'
const router = new VueRouter({
  routes,
  mode:'history'
})

nginx : 当你将它部署在 web 服务上时(例如: linux).you show add this config

server {
        listen       80;
        server_name  localhost;
        server_name_in_redirect off;

        location / {
            root   /etc/nginx/html; // deploy html path
            index  index.html index.htm;
            if (-d $request_filename) {
                rewrite ^/(.*) /index.html break;
            }
            if (!-e $request_filename) {
                rewrite ^/(.*) /index.html break;
            }
     }

【讨论】：