(十)打包和项目部署

在这一部分将项目打包上传,并且进行服务器部署

1. 什么是跨域

网页所在url的协议, 域名, 端口号, 和Ajax请求url的协议, 域名, 端口号有一个对应不上, 就发生跨域

三种解决跨域的方法

jsonp方式

需要前端和后端同时支持

前端用script+src属性, 发送函数名给后台, 同时准备好同名的函数, 准备接收数据

后端返回的字符串一定用方法名(数据字符串)格式返回, 到script标签中执行

调用函数名, 并传递数据

例子代码(看看就行, 不用尝试)

<script>function callBackFn(data){// data就是'{"a": 10, "b": 20}'}
</script>
<script src="http://后台接口地址?callback=callBackFn"></script>
<!-- 后台接口返回 'callBackFn({"a": 10, "b": 20})' -->

cors方式

前端什么也不用做
后端需要开启cors

实际上就是在响应头添加允许跨域的源

Access-Control-Allow-Origin: 字段和值(意思就是允许去哪些源地址去请求这个服务器)

代理转发

如果后端jsonp也不弄, cors也不弄, 就给你个接口地址

我们可以在本地弄个服务器, 然后用服务器请求后台服务器接口地址

devServer: {proxy: {// http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html'/api': { // 请求相对路径以/api开头的, 才会走这里的配置target: 'http://c.m.163.com', // 后台接口域名changeOrigin: true, // 改变请求来源(欺骗后台你的请求是从http://c.m.163.com)pathRewrite: {'^/api': '' // 因为真实路径中并没有/api这段, 所以要去掉这段才能拼接正确地址转发请求}}}}

2、项目打包

npm run serve 是启动开发环境的服务器 (编写代码过程查看效果用)
npm build 也是打包项目代码(但是会输出到dist文件夹下)
分析可以直接把webpack开发服务器部署到线上服务器, 但是不要那么干. 因为有热更新和转换代码的过程, 慢
建议让webpack打包出dist文件夹, 把dist静态文件夹发给后台/运维, 部署到公司服务器上
脚手架工程中运行

命令: npm run build

作用：用vue-cli内部集成的webpack，把.vue,.less.js 等打包成浏览器可直接执行的代码。

结果：会在项目根目录下创建 /dist目录，在这个目录下产出打包后的结果。

app.hash值.js ：主入口
app.hash值.js.map: 记录当前的.js文件, 打包之前对应代码位置, 有利于代码出错快速找到源代码的位置。
模块名.hash值.js - 模块里写的js代码

component: () => import('../views/search/index.vue')，在打包时，就会生成对应的chunk片段文件

chunk-vendors：第三方包的代码统一放在这里（dayjs,vue,vuex,vue-router,vant）-只要被webpack构建依赖关系发现的包
chunk-hash值.js: 某个第三方模块对应的js ,某个.vue文件编译之后的.js。

运行

可以直接用vscode+liveserver插件运行静态网页index.html

哇, 可怕的问题来了, 空白页, 悄悄打开控制, 发现全是路径引入报错

仔细一看, 要的都是服务器根目录下的js / css文件夹里的打包的片段文件
原因: vscode+liveServer插件, 会把vscode打开的根目录当做服务器的根目录, 根目录下并没有js / css文件夹

而且服务器也不会把你的dist里代码放到公司线上服务器根目录

解决

只需要让webpack打包时, 把路径弄成相对路径即可咯

在vue.config.js, 第一次对象里添加配置
```
publicPath: './'
```

注意出现空白页的问题

如果打包后F12出现路径404找不到的问题，
解决方法:需要在vue.config.js下配置publicPath

// vue.config.js
const path = require('path')
module.exports = {publicPath: './' // 告诉webpack打包的index.html引入其他资源文件以./开头, 不要默认/开头
}

如果打开F12不报错,但却一片空白，可能使用了history模式

解决方法把router下的history注释掉

const router = new VueRouter({// mode: 'history',base: process.env.BASE_URL,routes
})

打包的指令 npm run build

打包后的跨域问题
为什么打包之后没有发生跨域

打包后运行在http://localhost:5500
ajax请求的是http://toutiao.itheima.net

按道理来说, 应该跨域了啊

但是, 后台开启了cors, 所以直接请求

注意

如果你的后台没开启cors, 你使用webpack开发服务器来做的代理转发
那么打包后, 与webpack开发服务器没关系了

解决: 自己用node+express搭建一个本地服务器开启cors, 并启动

把自己前端的请求基地址改成这个服务器一起部署到线上

3、项目打包_跨域问题

项目打包,当到真实的生产环境

跨域问题

打包后为什么不会跨域

打包后运行在http://localhost:5500
ajax请求的是http://toutiao.itheima.net

按道理来说, 应该跨域了啊

但是, 后台开启了cors, 所以直接请求

注意

如果你的后台没开启cors, 你使用webpack开发服务器来做的代理转发,打包之后,与webpack没有关系

解决方法

自己用node+express搭建一个本地服务器开启cors, 并启动
把dist发送给后端,由于在同一个服务器上,不存在跨域问题

4、项目打包_分析-代码高亮

目标

如何优化打包体积

打包结果分析

vuecli中提供一个打包分析的工具

命令: yarn build --report

它会在dist目录下产生一个report.html文件，其中就有对打包结果的分析说明

效果 - 帮助我们分析哪个包的体积过大(针对性优化)

例如只用到一个方法的moment / dayjs 可以删除不要, 换成原生js自己写

5、优化-代码高亮

highlight.js体积过大, 可以让后台给代码标签设置好class类名给我返回

现在的接口已经弄好了

所以把main.js, 这段代码删除掉, 我们只要引入对应样式即可

// import hljs from 'highlight.js'
import 'highlight.js/styles/default.css' // 代码高亮的样式//Vue.directive('highlight', function (el) { // 自定义一个代码高亮指令
//  const highlight = el.querySelectorAll('pre, code') // 获取里面所有pre或者code标签
//  highlight.forEach((block) => {//    hljs.highlightBlock(block) // 突出显示pre和code内标签, 并自动识别语言, 添加类名和样式
//  })
//})

千万不要忘了, 去文章详情, 把使用的指令删除掉
但是后台没有提前设置类名的pre和code标签就没有了高亮
aid=7997 这个文章提前设置了类名, 所以还是ok的
再次打包观察体积

分析包的体积,如果体积比较大，可以换另一个工具包

6、项目打包_分析优化-moment

moment就用了一个格式化时间

解决

所以我们只用了其中一个功能, 但是webpack把整个包都打包进dist下了
所以我们可以自己用原生js实现, 格式化时间, 卸载moment包

yarn remove moment

// 时间选择
async confirmFn () {// console.log(this.currentDate instanceof Date)// this.currentDate里值是日期对象// 但是后台要"年-月-日"格式字符串参数值console.log(this.currentDate)const year = this.currentDate.getFullYear()let month = this.currentDate.getMonth() + 1let day = this.currentDate.getDate()month = month < 10 ? '0' + month : monthday = day < 10 ? '0' + day : dayconst dateStr = `${year}-${month}-${day}`await updateProfileAPI({birthday: dateStr})// 前端页面同步this.profile.birthday = dateStr// 时间选择器关闭this.isShowBirth = false
}

再次打包观察dist文件夹体积大小

观察报告, 最大的就是vue源码了, 那就没什么可以优化的了

7、项目打包_优化-去掉打印

上线后想让所有打印失效

如果自己删除, 那开发还得加回来, 注释也一样啊, 麻烦
能否配置环境变量, 让代码自己来判断呢
先在项目根目录下配置文件(脚手架环境变量)

在.env.development (开发环境变量)

NODE_ENV 变量名随便起, 值不用加引号就是字符串了
```
NODE_ENV=development
```
在.env.production (生产上线环境变量)
```
NODE_ENV=production
```

在main.js里加入如下配置

if (process.env.NODE_ENV !== 'development') { // process是Node环境全部变量, 运行时根据敲击的命令不同, 脚手架会取环境变量给env添加属性和值console.log = function () {}console.error = function(){}console.dir = function(){}
}

结束