新MES前端框架：vue-element-admin

前端框架

新MES前端框架决定使用：vue-element-admin，它基于 vue 和 element-ui实现，用VSCode打开目录，然后根据文档操作即可：

两个版本

vue-admin-template     最简项目模板，新MES前端会基于此模板进行开发。

vue-element-admin      功能项目实例，包含丰富功能，后续需要什么就去这里找。

vue-admin-template

代码地址：

https://github.com/PanJiaChen/vue-admin-template

vue-element-admin

代码地址：

GitHub - PanJiaChen/vue-element-admin: A magical vue admin https://panjiachen.github.io/vue-element-admin

admin无法下载npm包，所以直接使用本文档提供的zip包即可。

文档和用户手册

vue-element-ui

vue-element-admin

element ui

https://element.eleme.cn/#/zh-CN/component/quickstart

vue前端页面打包的时候，路径设置非常容易出错，特别是在动态url层级的时候，url的层级会变化，js静态资源和api接口就会错位，造成调用错位。

要考虑3个路径：

1 router路径

2 静态资源路径（js/css/image）

3 api接口调用路径（java接口）

router使用hash模式

hash模式用#将url分为两个部分，前半段是页面路径，后半段是router

http://10.126.24.195/#/ope-bill/new-entry

这样页面url和rouer分离，不容易造成静态资源和api接口路径错乱。

设置publicPath='./'

publicPath用于设置静态资源的路径。

如果设置为：

{

publicPath: '/'

}

静态资源则会固定到根路径下：

http://10.126.24.195/#/static/js/aaa.js

如果url层级变为 http://10.126.24.199/wm/#/

则静态资源路径仍然为：http://10.126.24.199/static/js/aaa.js

这时就会造成url层级错乱，导致js无法访问。

如果publicPath设置为相对路径：

则无论url层级如何变化，静态资源都会跟在页面路径之后：

页面url：   http://10.126.24.199/wm/#/ope-bill/new-entry

静态资源：http://10.126.24.199/static/js/aaa.js

url层级变化后，js静态资源的层级能自动适应：

http://10.126.24.199/wm/#/ope-bill/new-entry

http://10.126.24.199/wm/static/js/aaa.js

设置VUE_APP_BASE_API='./api'

访问api接口时，同样使用相对路径：

搭建一个vue项目(完整步骤)

如何搭建一个vue项目(完整步骤)_入花甲还要写代码的博客-CSDN博客_创建vue项目