vue+webpack+vue-router(history) 部署到nginx服务器下,非根目录,前后端怎样配置文件?

想要的效果,通过https://域名/kmf/+路径访问我想的SPA页面,言外之意,我们URL根目录是在kmf下面

前端配置

第一步:配置router

export default new Router({
  mode: 'history',  // 将模式转换成history
  base: '/kmf/',  配置路由的根目录
})

第二步:配置webpack中config的index.js

build: {
    ···
    assetsRoot: path.resolve(__dirname, '../dist/kmf'), // 将静态文件通过npm run build不存到dist的lmf文件夹中
    assetsSubDirectory: 'static',
    assetsPublicPath: '/kmf/', // 所有的文件从根目录下的kmf中获取,达到本分享的主题"非根目录,前后端怎样配置文件"
    ···
}

后端nginx部署

nginx中如何部署不在赘述,如需了解,请参考本人之前写的Mac下nginx部署以及linux下安装nginx以及部署web页面

在nginx部署中添加反向代理

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

完整的

server{
        listen 9102;
        server_name zackxizi.com;
        root /Users/zhangxi/work/maintenance/maintenance-info/dist;
        index index.html;
        location / {
                try_files $uri $uri/ /index.html;
        }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容