Vue项目的记录（十六）【前台完结】

前台项目完结

1、未登录的导航守卫判断

next('/login?redirect='+toPath)

上面的代码意思是 比如说从搜索页面去该页面，但是没有登录，希望登录后直接去该页面，而不是回到主页面

接收：

2、用户登陆

1、只有从购物车界面才能跳转到交易页面(创建订单) – 路由守卫

2、只有从交易页面(创建订单)页面才能跳转到支付页面 – 路由守卫

3、只有从支付页面才能跳转到支付成功页面 – 组件内守卫

3、图片懒加载

1、下载：https://www.npmjs.com/package/vue-lazyload

2、引入插件 JSON和图片都是默认对外暴露的

4、路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。如下图所示

5、打包

打包 npm run build
项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
有了 map 就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
所以该文件如果项目不需要是可以去除掉。
可以在vue.config.js 配置：productionSourceMap:false 即可

6、nginx反向代理

1 :为什么访问服务器IP地址就可以访问到我们的项目? —配置一些东西
http://82.156.11.187/ 在服务器上=>/root/llh/www/testMall/dist

2 :项目的数据来自于 http://39.98.123.211

nginx配置:
1 :xshell进入根目录/etc
2:进入etc目录，这个目录下有一个nginx目录，进入到这个目录 (已经安装过nginx:如果没有安装过，四五个文件)
3:如果想安装 nginx: yum install nginx
4:安装完nginx服务器以后，你会发现在nginx目录下，多了一个nginx.conf文件，在这个文件中进行配置
5: vim nginx.conf进行编辑，主要添加如下两项
解决上述的第一个问题：
location / {
root root/llh/testMall//dist ;
index index.html;
try_ files $uri $uri/ /index.html;
}

解决第二个问题： 数据来源的接口
location /api {
proxy_ pass http://39.98.123.211;
}

6:nginx服务器跑起来,指令：service nginx start