问题解决
本工程为vue工程,打包后,将dist文件夹下文件,移动至nginx下 html 目录
location / {
root html;
index index.html index.htm;
}
打开 指定域名后 页面正常,进行刷新后出现404.
添加配置 try_files 后正常显示。
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
当用户请求 http://localhost:8080/admin 时,会寻找admin文件夹下的内容。
问题扩展
现有两个前端工程,需要在相同域名下部署。如admin 管理端,user 用户端
管理端 http://localhost:8080/admin
客户端 http://localhost:8080/user
前端工程配置路由 admin
const createRouter = (): Router =>
new Router({
mode: "history",
base: '/admin/',
routes: constantRoutes
});
配置webpack的publicPath 属性
module.exports = {
publicPath: '/admin/'
...
}
打包后 看到dist中的index.html入口文件 中一个资源引用如下。
<link href=/admin/css/chunk-elementUI.99074003.css rel=stylesheet>
另一个user工程做相同配置,不再赘述。
把两个打好包的文件,放入 nigin 的 root文件夹下,本例为html文件夹。
在改文件夹下新建admin文件夹,user文件夹。放入工程,即可。
重启nginx的时机自己看着就行,这里也不说了。