Vue 3基础入门 课件 第12章 Vue3项目发布.pptxVIP

第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文件夹

npmrunbuild

VueCLI自动完成编

译、压缩和打包

包含优化后的静态资源文件

dist/css

包含样式文件

dist/js中还包含.map文件用于错误定位

12.1构建发布版本

map文件的作用

生产环境处理

压缩代码后错误难以定位

map文件可像未压缩代码一样输出错误行列信息

开发环境调试时非常有用

终端用户无需调试代码

map文件在生产环境不起作用

可通过配置在打包时自动移除

productionSourceMap:process.env.NODE_ENV===production?false:true

配置后重新构建,js目录下将不再生成