vue-element-admin 运行并且打包部署

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板以及非常的成熟了,并且有相关的社区和维护人员,开发时候遇到问题也不要慌。

推荐指数:star:55k
Github 地址:https://github.com/PanJiaChen/vue-element-admin
Demo体验:https://panjiachen.github.io/vue-element-admin/#/dashboard

文档:https://panjiachen.github.io/vue-element-admin-site/zh/

image

今天就来说一下,怎使用这个模板,以及写好了项目,怎么样把项目打包成静态文件,部署在服务器上。

1:去github上面下载或者克隆
Github 地址:https://github.com/PanJiaChen/vue-element-admin
我这里使用简单粗暴的方式,直接下点击载按钮

2:使用vscode打开,进入项目目录cd vue-element-admin,并且在项目里面安装依赖。

npm install --registry=[https://registry.npm.taobao.org](https://registry.npm.taobao.org)

建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

安装完成会发现项目目录中多了一个依赖文件夹


3:运行本地开发 启动项目

npm run dev

4:浏览器打开
运行成功就使用浏览器打开
http://localhost:9527/

可以在这个后台管理系统的模板的基础上,修改一些自己需要的代码,变成自己的开发的项目了,此处自行发挥,省略一万字。

=============

5:打包成静态文件
做好项目之后,需要开始打包了,打包成一个dist静态文件夹。

npm run build:prod
(prod 对应的是生成环境的配置内容)

打包成功之后
会出现一个这样的dist文件夹


6:查看本地index.html,在本地打开
选择在默认的浏览器打开


但是这个时候
我们会发现空白页
怎么办?
打开f12来看一下是什么情况吧

这里的报错是这样的

解决办法

正常vue项目是要修改 config文件夹下的index.js 可是vue-element-admin项目没有这个文件
那就找到并且打开vue.config.js

将 publicPath: '/',改成 publicPath: './',

再次执行,npm run build:prod命令
重新打包
这个时候,就可以直接在本地打开静态文件dist里面的index.html页面了。

注意:
如果修改了路径,点击登录按钮,还是不能跳转的话,可以考虑一下修改router/index.js里面的路由

const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

改成

const createRouter = () => new Router({
  mode: 'hash', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

改完后再打包一次即可

7:部署
部署这里,需要后端搭建好环境
我这里是一件搭建好的环境
使用ftp链接到服务器的根目录底下
我在根目录底下新建了一个文件夹ChemHtml
然后将dist静态文件夹里面的内容拷贝到ChemHtml里面

最后访问
服务器的主机ip地址我就加一下马赛克啦。


好了,完结,散花,准备下班!!
各位路过的小哥哥,小姐姐,喜欢的就点个赞呗。

欢迎关注【编程微刊】公众号,回复【领取资源】,500G编程学习资源干货免费送。

相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值