第9章 VueCLI部署项目

第9章

VueCLI部署项目9.1.1

什么是VueCLI

CLI-全局安装,提供vue命交互式项目脚手架CLI服务一零配置原型开发局部依赖,构建于webpack之上CLI插件-可升级的运行时依赖以@vue/cli-plugin-开头,提供可选功能9.1.2安装VueCLI9.1.2npminstall-g@vue/cliyarnglobaladd@vue/cli升级验证安装(npmupdateg@vue/cli)(vue--version)项目内升级使用vueupgradevuebuildvuecreatevueserve零配置启动开发服务器,适合快速原型开发零配置构建生产环境包创建完整新项目-p使用预设-d默认预设--bare省略新手引导-O打开浏览器-C复制URL-t指定构建目标-d指定输出目录9.1.2创建HelloWorld项目9.1.4了解VueCLI项目结构node_modules/-第三方依赖用接杵个约分鞋src目录是开发核心区域,包含入口文件main.js、根组件App.vue及自定义组件public/-模板与资源文件主体极文件hello-world/src/-主体代码(assets、components、App.vue、main.js)第件文件配置文件-packagejson、babel.configjs等9.2.1了解webpack模块依赖图Dependency入口Entry输出Loader转换BundleGraphwebpack是静态模块打包工具,构建内部依赖图,映射项目所需每个模块,生成一个或多个打包文件插件PluginsLoader对象形式函数形式confgureWebpack:{plugins:[..]configureWebpack:config{..}对象会被webpack-merge合并到最终配置中可基于环境变量条件修改配置注意:部分webpack选项需通过vue.config.js间接修改,如outputDir代替output.path9.2.2配置webpack-confgureWebpack修改Loader选项替换Loader修改插件选项config.module.rule()svgRule.uses.clear()后添加新loaderconfig.plugin()..tap(args=>{).use().tap()VueCLI使用webpack-chain维护内部配置,提供具名的loader规则和插件定义9.2.2配置webpack-confgureWebpack审查webpack配置vueinspect>output.jsvueinspect--rulevuevueinspect--pluginhtmlvueinspect--rules以文件方式使用配置审查特定规则路径:node_modules/@vue/cli-service/webpack.config.js,供IDE或CLI工具访问通过--rule参数指定规则名称查看详细配置9.2.2配置webpack-confgureWebpack9.3构建与部署VueCLI项目构建目标通过-target选项指定构建目标,默认应用模式:HTML注入资源、第三方库独立分包、小资源内联