底层架构 远程桌面登陆 templates react视频教程 react脚手架 java商城源码 网盘源码 软件测试项目实战案例 js字符串排序 linux 获取系统时间 idea整理代码格式 时间戳java dwf文件怎么转成dwg python字典添加 python读取mysql数据 python传参 java在线学习 java在线教程 java设置 java的集合框架 java数组添加元素 java新建文件 变量的类型 java异常处理 java文件删除 心理学与生活txt 局域网助手 allowoverride 0x0000004e 超级煎蛋卷 离散数学pdf js延迟加载 hexworkshop 通讯录管理系统 工程html加密 完美漂移辅助 批处理for 抖音APP下载 qq浏览器全屏 php上传文件
当前位置: 首页 > 学习教程  > 编程语言

# 项目部署

2020/9/19 14:16:29 文章标签:

项目部署

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

项目打包

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
  1. 重新提交,提交码云
git add .
git commit -m 'dist'
git push 仓库地址 master
  1. 在码云托管dist

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

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

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


本文链接: http://www.dtmao.cc/news_show_200091.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?