1 基础问题
1 需要部署项目的情况
1 提测 ( 提交测试) – 前后端都要提交代码 – 部署在公司内网上 (公司内部服务器或内网) – ( 也就是只有公司内部的人才能访问)
2 上线 – 要把代码部署在云服务器上
2 处理打包上线需要注意的问题
3 项目打包 – npm run build – 就是把开发环境中的源代码 – 编译成浏览器可以识别的代码
2 上线相关问题
1 图片问题
1 图片放置位置 – 无论哪种方式都要用模块化方式管理 – 就是只要用到图片都要进行模块化管理
1 远程绝对地址 – 就是使用自己后端的图片
1 打包上线不存在任何问题
2 本地 src/assets 目录中 – 可以考虑放置一些很小的图片
1 可以使用相对路径
2 webpack 对这里的图片只做名字的处理 – 不做大小的处理
3 这些被处理的图片, 将变成代码的一部分 – 图片太大会很影响代码执行效率
3 本地 public 目录中
1 路径设置 – /logo.jpg – http://localhost:8080/logo.jpg – 也就是根目录下的路径
2 webpack 不会对 public 中的资源做任何处理
3 只有 public 中的图片-- 上线才能做 CDN图片优化处理 – 就是静态资源加速
2 图片使用原则
1 图片直接仍在 public 目录下 – 非特殊情况不要放在 src/assets 目录中
2 使用模块化的方式 – 集中管理图片路径代码 --> Tools --> Vue --> 打包上线 --> 图片路径集中式管理
2 api 接口路径问题
1 本地的跨域代理 ( 开发环境) – 打包之后是不生效的 – 也就是上线也涉及跨域 – 上线还需要其他方式解决
2 注意修改 – baseURL – 测试的时候要内网地址 – 就是提供数据的 – 协议+域名+端口 – 地址
3 理解 – 开发时 – baseURL == 我们本地的地址 – 请求我们后端数据要进行一个跨域代理的配置
4 理解 – 测试时 – baseURL == 我们后端的地址 – 部署到后端的情况 – 说白了就是提供数据的服务器地址
5 理解 – 上线时 – baseURL ==
6 注意一个坑 – 如果你们后端网线一拔 – 就会换一个地址 – 我们测试的时候就不能正常请求到数据了
3 项目文件路径问题 – 就是解决所有静态文件的路径问题的 – 上线基本都要改的
1 默认打包上线是不能正常运行的 – 因为配置文件 – vue.config.js – publicPath: ‘/’ – 默认为 /
2 普通情况 – 我们把 ‘/’ --> ‘./’ – 之后的文件就可以正常找到对应的项目文件了 – 这个配置项不会自动生成需要自己加
3 情况1 – 我们买的服务器上 – 可能已经部署了多个项目 – 所以我们上线的时候要清楚的知道当前项目的资源文件部署在什么目录
4 情况1 – 根据服务器的目录结构 – 设置我们的 – publicPath: ‘/pc/’ – 表示当前项目部署在了 – 云服务器的pc目录下
5 情况2 – 还有一种情况 – 上线的时候 – 会把css, img 的一部分文件搬到另外一台cdn服务器上做静态资源加速
6 情况2 – 要根据cdn服务器设置 – publicPath: ‘http://baidu.com/cdn/hh/’ – 说白了就是请求绝对路径的静态资源 – cdn下的hh目录下
7 理解 – 它的作用就是 – 让我们的 index.html – 可以正常引入我们需要的静态资源文件 – 就是 css, js, 等这些文件
8 理解 – 也就是说 – 我们项目上线之后 – 引入css这些文件 – 是不可以通过相对路径访问的 – 一般不是部署在根目录的
9 路径语法 – ./ 等价于不加 – / 根路径 – @/ src目录
4 路由模式
1 哈希模式 – Hash – 打包上线没有任何问题
2 History – 在上线部署时 – 刷新会出现 404 – 需要后端 Nginx /Apache做重定向处理
3 其他问题
1 云服务器 – 就是在服务器厂家 – 的提供数据的服务器 – 一个超级大的 – 一直运行的电脑
2 本地提测 – 把打包好的 dist文件 – 扔给测试就 OK了
3 Vue 和 React 项目不支持 IE678
4 自己弄一个服务器 – 测试一下整体流程
5 打包后的项目文件名 – 会有一个哈希值字段
1 这样我们重新打包了文件 – 我们的文件名会和之前的有变化
2 浏览器会缓存我们的项目资源 – 如果没发现我们的项目静态资源名有变化 – 就会使用缓存的资源
3 这样每次打包修改 – 项目文件名 – 都会有变化 – 浏览器就会刷新页面了 – 而不会去读取缓存的资源了
4 这个是可以关闭的 – 但是一般是不关闭的
6