非你网

设想我们的后台是前后端分离的，可以和主站点同域名，也可以不同域名。当前考虑的前端框架有 ant design pro 和 vue element admin。虽然 ant design pro 是阿里的业余产品，ui 漂亮丰富，使用 react 来开发，可前端总体表现上没有 vue element admin 小，前端展示细节问题没处理好，而且一直在更新一直又不好。还是果断选择 vue element admin。

预览页： https://panjiachen.github.io/vue-element-admin

文档页：https://panjiachen.gitee.io/vue-element-admin-site/zh/

这里，使用的和主站点同域名，同环境下。这个时候就得为后台想一个好的路由前缀，暂且这么叫吧。这里使用的是 http://jk.cn/admin。 对，就是 admin，文件放在非根目录下（admin 下），打包编译的时候需要注意，可关注发布相关细节。

https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/deploy.html#%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E4%B8%8E%E6%9C%8D%E5%8A%A1%E7%AB%AF%E7%9A%84%E7%BB%93%E5%90%88

路由使用方式可以使用 browserHistory 和 hashHistory，个人喜好好看，就使用 browserHistory 方式，这个得修改 nginx 配置。 上边链接已经说明，后边也会设置修改。

开始安装

在原来的基础上进行安装，这里我们将文件放在 resource 下。

cd resources

git clone https://github.com/PanJiaChen/vue-element-admin.git admin 

cd admin

# 镜像这些，要先配置好
npm install

npm run dev 

然后修改 vue.config.js 的 publicPath 值为 /admin/, outputDir 值为 ../../public/admin 执行 npm run build:prod

编译打包，并移到正确位置下

npm run build:prod

然后访问 http://jk.cn/admin ,可访问，可登陆。可路由模式是 hashHistory，不好看。 修改 src/router/index.js 中的 mode 为 mode: 'history'，并添加 base: '/admin/' 即可使用 browserHistory路由方式, 再重新打包，重新访问。

重点重点：修改publicPath以及base，这两个很重要

解决 browserHistory 路由模式引起的问题

使用了 browserHistory 路由模式，导致访问页面跳转 404。这个得修改 nginx，因为服务环境使用的就是 nginx。

sudo vim /etc/nginx/sites-enabled/jk.cn

# 添加下边的解释
    location /admin {
        index index.html index.htm;
        try_files $uri $uri/ /admin/index.html;
    }

sudo nginx -s reload

其实，上边仅仅处理好了 vue 这边的，但是如果接口也使用 admin 作为路由的一部分呢，也刚好吻合呢。比如 http://jk.cn/admin/api/xxx ，上边的 nginx 配置可不够看。这里就需要排除掉 admin/api 这一部分。可以使用 nginx 正则匹配。如下：

    location ~* ^\/admin\/((?!api\/).) {
        try_files $uri $uri/ /admin/index.html;
    }

再来访问看看，发现一切 ok。

下一步

查看 mock 数据，并去掉 mock，使用项目真实的接口去实现登录，以及获取用户信息。