记一次Vue整体实践经验！

1、Vue-router 问题

首先mode: ‘history’ 坚持使用history。不需要注释修改，打包时也要使用，千万别改为hash,不仅路由不美观，并且会出现一系列问题，一直伴随你到打包上线。比如：

此错误困扰两天，去掉mode: ‘hash’, 才解。
开发之前路由不跳转、打包后使用nginx代理时部分路由404。等等等等总之路由就搞得我很难受。
二级路由使用children：

前面如果使用const router = new Router 后面一定要使用 export default router

2、Vuex

此处Vuex我只做了登录状态存储，对路由进行权限控制。
首先要下载vuex npm install vuex --save 无论是使用 npm 还是cnpm,还是在package.json 中加入"vuex": “^3.1.2” 执行npm install 等等只要下载下来就行。

别忘了使用store

store.js 中代码如下

登录成功后要保存token

vuex 中 state => 基本数据 mutations => 提交更改数据的方法
使用this.$store.commit 调用mutations中的方法
此处我保存的是登陆状态码
最后就是路由判断登录

此处我根据状态码来判断

3、 打包

命令 npm run build
打包之前 要修改配置
1、vue通过build打包后 打开index.html页面是空白的
找到config文件下index.js assetsPublicPath：’ / ’ 默认为根目录 ，
修改为assetsPublicPath：’ ./ ’ ，（build 下） 斜杠前加一个点，表示同一级
2、解决解决打包后element-ui图标字体不显示的问题
在build/utils.js下找到

添加 publicPath: ‘…/…/’
打包完成之后 下载nginx
打包之后之前做的跨域配置已失效、跨域问题：
使用nginx 反向代理 proxy_pass
打包之后出现404 网页可通过如下配置解决（使用mode: ‘history’）

包dist(打包文件)放到 与html 平级的目录中。启动nginx
在浏览器中输入http://localhost:8080 即可看到你想看到的东西。

4、补充

vue 配置跨域 问题
找到config 中的index.js
我的数据在local host:3000

此时使用/localhost 代替 local host:3000

至于 后台使用的是Node.js 框架Express 数据库使用的是mysql
Express:https://github.com/Usered/demo/tree/master/Express
Vue:https://github.com/Usered/demo/tree/master/Vue