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