Vue 路由history模式nginx部署(二级目录)
公司常用服务器为apache,最近一个项目需部署到nginx目录,且是在子目录下,即访问链接:http://www.xxx.com/rector/bnu/apache服务器配置很简单,只需要在index.html同级目录下添加.htaccess文件即可,代码如下:RewriteEngine OnRewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQ
·
公司常用服务器为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",
}
嗯,就是这么简单了
更多推荐
已为社区贡献3条内容
所有评论(0)