美文网首页
vue+webpack+vue-router(history)

vue+webpack+vue-router(history)

作者: zackxizi | 来源:发表于2018-04-24 00:26 被阅读0次

    想要的效果,通过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;
            }
    }
    

    相关文章

      网友评论

          本文标题:vue+webpack+vue-router(history)

          本文链接:https://www.haomeiwen.com/subject/pzxdlftx.html