Vue 路由history模式nginx部署(二级目录)

公司常用服务器为apache，最近一个项目需部署到nginx目录，且是在子目录下，即访问链接：http://www.xxx.com/rector/bnu/

apache服务器配置很简单，只需要在index.html同级目录下添加.htaccess文件即可，代码如下：

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /rector/bnu/index.html [L]

RewriteRule 路径需包含子目录路径

nginx服务器需要修改nginx的配置文件，如果是域名单配置文件则在nginx安装目录nginx/conf/vhost目录下的域名配置文件，一般文件名为域名.config，如果不是域名单配置文件咋是修改 nginx.conf 文件，配置代码如下：

/rector/bnu 为需要配置的子目录，以实际为准

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

vue代码修改：

首先是router/index.js文件，base需改为子目录路径：

const router = new VueRouter({mode: 'history',// base: process.env.BASE_URL,base: "/rector/bnu/",routes
})

vue.config.js文件中定义publicPath(打包后公共资源文件访问路径)：

module.exports = {lintOnSave: false,devServer: {proxy: {'/web': {target: 'http://yzconsole.360eol.com',changeOrigin: true,}}},chainWebpack: config => {config.plugin('html').tap(args => {args[0].title = "北京师范大学2022年研究生招生宣传"return args})},publicPath:"/rector/bnu",
}

嗯，就是这么简单了

Vue 路由history模式nginx部署(二级目录)相关推荐

vue-router路由history模式+nginx部署项目到非根目录下(实践版)
你总是心太软心太软独自一个人研究到天亮你无怨无悔的疯狂找寻我知道你根本没那么坚强你总是心太软心太软把所有问题都自己扛问题总是太多解决太难不是你的就别再勉强夜深了你还不想睡你还在想着他 ...
vue路由history模式,nginx配置
nginx配置内容 # For more information on configuration, see: # * Official English Documentation: http://n ...
vue 路由history模式打包部署 The requested URL * was not found on this server. 的解决方法
apache开启rewrite_module模块, 在项目根目录创建.htaccess文件,文件内容如下 <IfModule mod_rewrite.c> Options +Follo ...
Vue路由history模式踩坑记录：nginx配置解决404问题
问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...
vue项目nginx部署二级目录
一.修改router.js中添加base根目录配置 const vueRouter = new Router({mode: 'history',base: 'app', 二.修改vue.config. ...
新来的前端小姐姐问：Vue路由history模式刷新页面出现404问题
摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...
vue路由history模式刷新页面时页面丢失时常见的两种解决方法
方法一: 1 2 3 4 5 6 7 8 location /{ root /data/nginx/html; index index.html index.htm; i ...
在nginx上部署vue项目(history模式)；
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
在nginx上部署vue项目(history模式)--demo实列；
转载地址:https://www.cnblogs.com/573734817pc/p/11057677.html 在很早之前,我写了一篇关于在nginx上部署vue项目(history模式) 但是 ...

Vue 路由history模式nginx部署(二级目录)

Vue 路由history模式nginx部署(二级目录)相关推荐

最新文章

热门文章