Javascript

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

本文主要是介绍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部署(二级目录)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!