history 改成 模式_VUE 改成history 模式 刷新404 的问题

vue 路由的URL有两种模式,一种是 hash,一种是history ,history 模式更好看一些。

在使用hisory模式时,由于地址并不是真实存在,那么在刷新的情况下,这个会报404错误。

改成history 模式,如果在直接在根目录下访问还是比较简单的。

修改 webpack 的配置文件

config/index.js

module.exports ={

build: {

env: require('./prod.env'),

index: path.resolve(__dirname,'../dist/index.html'),

assetsRoot: path.resolve(__dirname,'../dist'),

assetsSubDirectory:'static',

assetsPublicPath:'/',

productionSourceMap:true,

将assetsSubDirectory 修改为 / .

修改 nginx.conf  配置

location /{

alias E:\\temp\\vuemb\\dist\\;index index.html index.htm;try_files$uri $uri/ /index.html;}

http://localhost:8000/params/123

在访问这个地址时,我们可以直接输入这个地址就可以访问到了。

如果我们希望使用一个上下文路径的时候,比如 http://localhost:8000/demo 这样访问,需要做如下更改。

config/index.js 修改为如下代码

module.exports ={

build: {

env: require('./prod.env'),

index: path.resolve(__dirname,'../dist/index.html'),

assetsRoot: path.resolve(__dirname,'../dist'),

assetsSubDirectory:'static',

assetsPublicPath:'/demo',

assetsPublicPath 这个修改为 /demo

路由配置做如下修改

export default newRouter({

mode:'history',

base:'/demo',

routes: [

这里需要增加一个base 配置,修改完成后重新编译代码。

修改nginx.conf 配置如下:

location /demo {

alias E:\\temp\\vuemb\\dist\\;

index index.html index.htm;

try_files $uri $uri/ /demo/index.html;

}

访问结果如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值