# 项目部署

项目部署

此文的目的是让学员了解项目开发完毕后的部署过程，但是企业的部署环境肯定和此文档中不一致，所以仅供参考。

项目打包

vue.config.js 配置

module.exports = {
+  publicPath: './',
  lintOnSave: false,

作用：打包后index.html的依赖资源路径使用 ./ 相对路径而非使用默认的 /绝对路径。

目的：在部署的时候有可能除去域名外存在二级路径，导致资源路径出现问题。

• 例如：部署在 http://www.itcast.cn/web/ 下加载 test.js 资源
  • 使用默认的 / 的时候 http://www.itcast.cn/test.js 错误
  • 使用配置的 ./ 的时候 http://www.itcast.cn/web/test.js 正确

结论：最好配置成 ./ 的相对路径，不管部署在任何目录下加载项目需要的资源才不会出现问题。

线上接口切换

**首先：**在本地开发的时候使用的是本地服务器 http://localhost:7001/ 但是当你在其他电脑的时候是访问不到本地服务器的。

**然后：**需要在线部署接口服务器先，接口服务器已经提前部署完毕，地址是 http://hmmm-api.itheima.net/ , 那么在打包的时候就需要把 axios 的基准地址替换。

**如果：**手动的去修改的化，会略显麻烦，而且将来需要在本地测试的时候又需要修改回来，不是特别的便利，所以可以根据运行环境去区分接口地址就好了。

方案：

• 当你执行 npm run serve 的时候，vue-cli在环境变量中加入了 NODE_ENV=developement
• 当你执行 npm run build 的时候，vue-cli在环境变量中加入了 NODE_ENV=production
• 所以只需要根据当前的环境变量的值来判断运行环境，从而去使用对应的接口地址即可。
• 上面两种执行方式都是nodejs环境下运行，获取环境变量的代码：process.env.NODE_ENV

const instance = axios.create({
+  baseURL: process.env.NODE_ENV === 'developement' ? 'http://localhost:7001/' : 'http://hmmm-api.itheima.net',
  timeout: 5000 // request timeout
})

• vue-cli打包的时候会将 process.env.NODE_ENV 解析成对应的值，从而可以判断生产还是开发使用对应的地址。

前端部署

执行 npm run build 打包后得到，dist 文件夹。

服务器（计算机）部署

• 首先拥有一台外网服务器，将 dist 文件夹在这台服务器使用 web服务托管即可。
• 后台去做：
  • 如果是java项目，一般是后台拿到你打包的dist进行托管，使用的服务器软件可能是tomcat
  • 如果是php项目，一般是后台拿到你打包的dist进行托管，使用的服务器软件可能是apache
  • … 也有可能直接使用 Nginx 托管 … 等等
• 前端去做：
  • 安装nodejs环境，使用 serve 这个命令行工具，即可快速托管dist文件，提供web服务。
  • 大致步骤：
    • 有一台外网服务器
    • 安装 nodejs 运行环境，安装 serve 全局命令行工具
    • 把 dist 放置服务器上
    • 在 dist 目录下执行 serve
    • 默认端口是 5000 你可以修改为其他端口
    • 知道服务器IP，或者进行域名配置后。
    • 你可使用 IP 访问，或者域名访问。

gitee的pages服务部署

1. 修改 .gitignore 文件

-/dist
+#/dist

2. 重新提交，提交码云

git add .
git commit -m 'dist'
git push 仓库地址 master

3. 在码云托管dist

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ie2N9c8h-1600495649692)(docs/media/1585904485205.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iljZlDNS-1600495649694)(docs/media/1585904534412.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sqznuEWW-1600495649695)(docs/media/1585904565864.png)]