Write the Code. Change the World.

9月 11

设想我们的后台是前后端分离的,可以和主站点同域名,也可以不同域名。当前考虑的前端框架有 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

路由使用方式可以使用 browserHistoryhashHistory,个人喜好好看,就使用 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,使用项目真实的接口去实现登录,以及获取用户信息。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

3 条留言
  1. 天然呆

    大佬,按照您这样的安装,VUE无法获取到env.development等的常量呀?您能获取得到吗?process.env.VUE_APP_BASE_API