?前言
大家好，我是yma16，本文分享關(guān)于vue2、vue3去掉url路由 # 號——nginx配置。
html的 hash模式
HTML的hash模式指的是URL中的錨點(diǎn)部分（#后面的內(nèi)容）被用于在單個頁面中顯示不同的內(nèi)容，而不是導(dǎo)航到不同的頁面。例如：
https://example.com/#about
在這個示例中，
#about部分是一個錨點(diǎn)，用于在頁面上顯示關(guān)于頁面的內(nèi)容，而不是導(dǎo)航到一個新的頁面。
在使用hash模式時，可以使用JavaScript監(jiān)聽hashchange事件，以便在錨點(diǎn)改變時執(zhí)行相應(yīng)的操作。這種模式常用于單頁面應(yīng)用程序（SPA），其中所有頁面內(nèi)容都在同一個HTML頁面中加載，而不是通過導(dǎo)航到新頁面來加載。此外，hash模式還可以用于在不刷新整個頁面的情況下更改URL，以便在瀏覽器歷史記錄中創(chuàng)建可回退的狀態(tài)。
html的 history模式
HTML5中的History API允許使用JavaScript動態(tài)更新URL并在歷史記錄中保存狀態(tài)，而不會刷新整個頁面。這就是所謂的“history模式”。它使用HTML5的pushState和replaceState方法來添加或修改瀏覽器歷史記錄中的條目。
在history模式下，URL的路徑部分會隨著用戶的操作而變化，但實(shí)際頁面內(nèi)容不會刷新，這使得Web應(yīng)用程序更具交互性和可訪問性。
如果瀏覽器支持History API，那么就可以使用history.pushState()和history.replaceState()方法來更新瀏覽器的URL路徑，從而可以實(shí)現(xiàn)前端路由，而不用像傳統(tǒng)的多頁面應(yīng)用一樣每次都請求服務(wù)器獲取新的HTML頁面。
?vue2中router默認(rèn)出現(xiàn)#號
路由配置默認(rèn)出現(xiàn) #
??在vue2項(xiàng)目中去掉
關(guān)鍵配置
// 路由
const router = new VueRouter({
mode: 'history',
routes
})
router的配置
import { isEmpty } from '@/utils'
import store from '@/store'
const Login = () => import('@/components/user/Login')
const Register = () => import('@/components/user/Register')
const Onlinewebsocket = () => import('@/components/websocket/Onlinewebsocket')
const Home = () => import('@/components/Home')
const Bilicom = () => import('@/components/Bilicom')
const Mavoneditor = () => import('@/components/Mavoneditor')
const GrilShow = () => import('@/components/GrilShow')
const Csslearn = () => import('@/views/cssView/Csslearn')
const Article = () => import('@/views/article/Article')
const defaultRoutes = [
{
path: '/',
name: 'Article',
component: Article,
hidden: true
},
{
path: '/login',
name: 'Login',
component: Login,
hidden: false
},
{
path: '/register',
name: 'Register',
component: Register,
hidden: false
},
{
path: '/home',
name: 'Home',
component: Home,
hidden: true
},
{
path: '/onlinewebsocket',
name: 'Onlinewebsocket',
component: Onlinewebsocket,
hidden: true
},
{
path: '/mavoneditor',
name: 'Mavoneditor',
component: Mavoneditor,
hidden: true
},
{
path: '/gril',
name: 'grilshow',
component: GrilShow,
hidden: true
},
{
path: '/css',
name: 'css',
component: Csslearn,
hidden: true
}
]
const useRouter = (Vue, VueRouter) => {
let routes = [
...defaultRoutes
]
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
return originalPush.call(this, location).catch((err) => err)
}
// 路由
const router = new VueRouter({
mode: 'history',
routes
})
router.beforeEach(async (to, from, next) => {
let yma16siteUserInfo = localStorage.getItem('yma16siteUserInfo')
? JSON.parse(localStorage.getItem('yma16siteUserInfo'))
: {}
let name = yma16siteUserInfo.username
let pwd = yma16siteUserInfo.password
let thirdUserInfo = yma16siteUserInfo.thirdUserInfo
console.log('to', to)
let hasToken = {
name: name,
password: pwd,
thirdUserInfo: thirdUserInfo
}
console.log('localStorage', hasToken)
if (hasToken.name && hasToken.password) {
if (!isEmpty(store.state.user.userInfo)) {
try {
// 空的 modules下的user
console.log('路由的登錄認(rèn)證')
// 用戶自主登錄
await store.dispatch('user/loginUserInfo', hasToken)
next()
} catch (e) {
console.error(e, 'e')
if (to.name === 'Login' || to.path === '/login' || to.name === 'register' || to.path === '/Register') {
// 避免同名路由無限循環(huán)
console.log('next')
next()
} else {
console.log('login router')
return next({ name: 'Login' }) // 去登錄
}
}
} else {
console.log('next')
next()
}
} else if (to.name === 'Login' || to.path === '/login' || to.name === 'Register' || to.path === '/register') {
console.log('next login register')
// 避免同名路由無限循環(huán)
next()
} else {
console.log('login router')
return next({ name: 'Login' }) // 去登錄
}
return false
})
Vue.use(VueRouter)
return router
}
export default useRouter
效果 url 沒有 # 號
??在vue3項(xiàng)目中去掉
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
})
createWebHashHistory變成createWebHistory
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
//...
],
})
?vue打包 assetsPublicPath base 為絕對路徑 /
??vue2 配置 assetsPublicPath
"use strict";
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require("path");
module.exports = {
dev: {
// Paths
assetsSubDirectory: "myblog_static",
assetsPublicPath: "/",
proxyTable: {
"/api/": {
target: "后端接口地址", //后端接口地址
ws: true, //接受websocket請求
changeOrigin: true, //是否允許跨越
chunkOrigins: true,
pathRewrite: {
"^/api": "api", //重寫,
},
},
},
// Various Dev Server settings
host: "localhost", // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: false,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: "cheap-module-eval-source-map",
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true,
},
build: {
// Template for index.html
index: path.resolve(__dirname, "../dist/index.html"),
// Paths
assetsRoot: path.resolve(__dirname, "../dist"),
assetsSubDirectory: "myblog_static",
assetsPublicPath: "/",
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: "#source-map",
// Gzip off by default as many popular myblog_static hosts such as
// Surge or Netlify already gzip all myblog_static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ["js", "css"],
isIgnoreLogs:true,
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report,
},
};
??vue3 配置 base
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// @ts-ignore
import { resolve } from "path";
// @ts-ignore
import Components from "unplugin-vue-components/vite";
// @ts-ignore
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
export default defineConfig({
// 打包相對路徑
base: '/',
server: {
port: 3000,
open: true,
cors: true,
proxy: {
"^/cloudApi/": {
target: "https://yongma16.xyz/back-front/",
// target: "http://localhost:9090/",
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(/^\/cloudApi/, ""),
},
},
},
"css": {
preprocessorOptions: {
less: {
javascriptEnabled: true,
patterns: [resolve(__dirname, "./src/style/main.less")],
},
},
},
resolve: {
alias: {
"@": resolve(__dirname, "src"),
},
},
plugins: [
vue(),
Components({
resolvers: [AntDesignVueResolver()],
}),
],
});
??驗(yàn)證
1.檢查 路徑十是否都是絕對路徑
2. 本地打開index.html不可取，使用http-server啟動打開
檢查絕對路徑
檢查http-server可以運(yùn)行vue而且沒有#號
?nginx 配置
?? 使用默認(rèn)的nginx 靜態(tài)資源文件夾
- vue打包目錄就放在 nginx 默認(rèn) html靜態(tài)文件夾
location / {
try_files $uri $uri/ /index.html;
}
?? 自定義靜態(tài)資源文件夾
# 路徑
location / {
root /web-server/front-project/dist;
try_files $uri $uri/ @router;
index index.html index.htm;
}
# @router配置
location @router {
rewrite ^.*$ /index.html last;
}
# 靜態(tài)資源代理
location /myblog_static {
alias /web-server/front-project/dist//myblog_static/;
}
效果：
https://yongma16.xyz/
?結(jié)束
本文分享到這結(jié)束，如有錯誤或者不足之處歡迎指出！
文章來源：http://www.zghlxwxcb.cn/news/detail-675421.html
?? 點(diǎn)贊，是我創(chuàng)作的動力！
?? 收藏，是我努力的方向！
?? 評論，是我進(jìn)步的財(cái)富！
?? 感謝你的閱讀！文章來源地址http://www.zghlxwxcb.cn/news/detail-675421.html
到了這里，關(guān)于前端vue2、vue3去掉url路由“ # ”號——nginx配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
