【笔记】使用 vue-element-admin 做网站前端页面,去除 #号,并放在一级目录下访问

vue tytrock ⋅ 于 2023-12-29 18:23:27 ⋅ 363 阅读

最近在使用vue-element-admin做网站前端(非后台管理),平时用vue-element-admin做后台管理一般都会设置在二级目录下,并且带有#号(如https://www.abc.com/admin/#/),现在做网站前端了,就不能放在二级目录并且不能带有#号了,如https://www.abc.com就可以直接访问,过程遇到不少困难,记录一下。后端语言是Laravel,服务器是nginx


1、修改vue-element-admin的路由模式

router的默认mode为hash模式,关于hash模式,官方文档这样描述


它在内部传递的实际 URL 之前使用了一个哈希字符(#)。由于这部分 URL 从未被发送到服务器,所以它不需要在服务器层面上进行任何特殊处理。不过,它在 SEO 中确实有不好的影响。如果你担心这个问题,可以使用 HTML5 模式。

– -- 《Vue Router官方文档》


而关于history模式,官方文档是这样说的

当使用这种历史模式时,URL 会看起来很 “正常”,例如 https://example.com/user/id。漂亮!

这正符合我们的需求。于是在我们的项目中启动路由mode的history模式:

打开src/router/index.js文件,更改一下路由模式(默认注释的,取消一下注释)

image.png

const createRouter = () => new Router({
	mode: 'history', // require service support
	scrollBehavior: () => ({ y: 0 }),
	routes: constantRoutes
})


2、修改vue-element-admin的publicPath

打开根目录下的vue.config.js文件,将publicPath的值改为:'/'

image.png

修改完后,编译一下,再上传到Laravel的public目录下


3、修改nginx的站点配置

打开站点配置文件,将location / {}里的内容修改一下

location / {
    try_files $uri $uri/ /index.html;
}


重启nginx,输入站点域名,网站打开了,但发现网站用到的接口都报了405,

image.png


4、问题处理

原因是本来在nginx配置Laravel站点时,location / {}里的内容是要针对Laravel做专门的配置,现在为vue-element-admin做了配置,导致Laravel的api都无法请求了,于是为在nginx里专门为api\再做下配置:

location /api/ {
	
   try_files $uri $uri/ /index.php?$query_string;
}

就可以正常访问了





本帖已被设为精华帖!
回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter