vue+webpack+vue-router(history)

2018-04-24  本文已影响0人  zackxizi

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

猜你喜欢

热点阅读