(十)打包和项目部署

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

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目录，在这个目录下产出打包后的结果。

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

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

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

运行

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

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

   仔细一看, 要的都是服务器根目录下的js / css文件夹里的打包的片段文件

2. 原因: vscode+liveServer插件, 会把vscode打开的根目录当做服务器的根目录, 根目录下并没有js / css文件夹

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

解决

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

   在vue.config.js, 第一次对象里添加配置

   publicPath: './'
   

注意出现空白页的问题

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

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

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

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

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

打包的指令 npm run build

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

1. 打包后运行在http://localhost:5500

2. ajax请求的是http://toutiao.itheima.net

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

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

注意

1. 如果你的后台没开启cors, 你使用webpack开发服务器来做的代理转发

2. 那么打包后, 与webpack开发服务器没关系了

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

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

3、项目打包_跨域问题

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

跨域问题

打包后为什么不会跨域

1. 打包后运行在http://localhost:5500

2. ajax请求的是http://toutiao.itheima.net

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

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

注意

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

解决方法

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

2. 把dist发送给后端,由于在同一个服务器上,不存在跨域问题

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

目标

• 如何优化打包体积

打包结果分析

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

命令: yarn build --report

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

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

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

5、优化-代码高亮

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

   现在的接口已经弄好了

2. 所以把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内标签, 并自动识别语言, 添加类名和样式
   // })
   //})
   

3. 千万不要忘了, 去文章详情, 把使用的指令删除掉

4. 但是后台没有提前设置类名的pre和code标签就没有了高亮

5. aid=7997 这个文章提前设置了类名, 所以还是ok的

6. 再次打包观察体积
   
   分析包的体积,如果体积比较大，可以换另一个工具包

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

• moment就用了一个格式化时间

解决

1. 所以我们只用了其中一个功能, 但是webpack把整个包都打包进dist下了

2. 所以我们可以自己用原生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() + 1
    let day = this.currentDate.getDate()
    month = month < 10 ? '0' + month : month
    day = day < 10 ? '0' + day : day
    const dateStr = `${
      year}-${
      month}-${
      day}`
    await updateProfileAPI({
    
        birthday: dateStr
    })
    // 前端页面同步
    this.profile.birthday = dateStr
    // 时间选择器关闭
    this.isShowBirth = false
}

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

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

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

• 上线后想让所有打印失效

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

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

  NODE_ENV 变量名随便起, 值不用加引号就是字符串了

  NODE_ENV=development
  

• 在.env.production (生产上线环境变量)

  NODE_ENV=production
  

4. 在main.js里加入如下配置

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

结束