第12章 Vue3项目发布_第1页
第12章 Vue3项目发布_第2页
第12章 Vue3项目发布_第3页
第12章 Vue3项目发布_第4页
第12章 Vue3项目发布_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第12章

Vue3项目发布12.1构建发布版本手动清理删除或注释代码中的alert语句和console.log语句统一规范开发时统一使用console.log而非alert即使忘记删除,调试信息也不会出现在页面上自动化优化使用terser-webpack-plugin播件在构建时自动删除在terserOptions配置中设置移除console和alert避免调试信息状露给件用户,影响体验12.1构建发布版本步骤1执行构建命令步骤2步骤3生成dist目录目录结构dist/s包含多个JS文件(异步路由按需加载)在项目根目录下运行构建成功后在项目根目录生成dist文件夹npmrunbuildVueCLI自动完成编译、压缩和打包包含优化后的静态资源文件dist/css包含样式文件dist/js中还包含.map文件用于错误定位12.1构建发布版本map文件的作用生产环境处理压缩代码后错误难以定位map文件可像未压缩代码一样输出错误行列信息开发环境调试时非常有用终端用户无需调试代码map文件在生产环境不起作用可通过配置在打包时自动移除productionSourceMap:process.env.NODE_ENV==='production'?false:true配置后重新构建,

js目录下将不再生成map文件12.2部署步骤1步骤2解压文件步骤3步骤4下载Nginx启动服务器验证运行从ngirnc.ong下载Ngjinx压缩包,选择稳定版本下载后为压缩包格式解压到日标日录运行目录下的nginxce,浏览器访问htp//ocahost/,出现Nginx欢页即代表运行正常默认监听80端口12.2

部署复制构建产物将dist目录内的文件复制到nginx的html目录下,注意不包括dist文件夹本身首次访问验证访问http://localhost/检查页面是否加载,页面可正常显示但数据请求失败dist目罩html问题定位开发环境的代理配置仅适用于脚手架内置Node.js服务器,nginx需要单独配置反向代理才能请求后端数据12.2

部署配置文件位置nginx目录下conf/nginx.conf文件该文件为nginx默认配置文件location/apirewrite/api/(.*)$/$1break;proxy_pass:8000proxy_set_headerHostShost;location/api配置通过rewrite重写请求路径proxy_pass指向后端服务地址关键请求头设置X-Real-IP传递客户

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论