《Vue 3基础入门》课件 第九章 Vue CLI 项目部署

第9章VueCLI部署项目Contents目录VueCLI的简介01webpack概述02构建与部署VueCLI项目0301VueCLI的简介PART安装VueCLI可以在命令行中使用下列任一命令进行安装：npminstall-g@vue/cli#ORyarnglobaladd@vue/cli如需升级项目中的VueCLI相关模块（以@vue/cli-plugin-或vue-cli-plugin-开头），则在项目目录下运行以下命令：选项包括以下6种：安装完成后，可以使用以下命令检查Vue3的版本是否正确：vue--version如果需要升级全局的VueCLI包，运行以下命令：npmupdate-g@vue/cli#或者yarnglobalupgrade--latest@vue/cliupgrade[options][plugin-name]-t,--to<version>升级<plugin-name>到指定的版本-f,--from<version>跳过版本检测，默认从指定的版本升级-r,--registry<url>使用指定的registry地址安装依赖--all升级所有的插件--next检查包括alpha/beta/rc版本在内的新版本-h,--help输出帮助内容创建HelloWord项目开发者可以使用vueserve和vuebuild命令对单个*.vue文件进行快速原型开发这需要先额外安装一个全局的扩展：vuebuild命令用法如下npminstall-g@vue/cli-service-globalvueserve命令用法如下：serve[options][entry]选项包括:所需要的是一个App.vue文件：<template><h1>Hello!</h1></template>build[options][entry]在生产环境模式下零配置构建一个.js或.vue文件选项包括:vuecreate创建一个新项目的命令方法如下：vuecreatehello-world-o,--open打开浏览器-c,--copy将本地URL复制到剪切板-h,--help输出帮助信息-t,--target<target>构建目标(app|lib|wc|wc-async,默认值：app)-n,--name<name>库的名字或WebComponents组件的名字(默认值：入口文件名)-d,--dest<dir>输出目录(默认值：dist)-h,--help输出帮助信息创建HelloWord项目创建一个由vue-cli-service提供支持的新项目的命令：create[options]<app-name>-p,--preset<presetName>忽略提示符并使用已保存的或远程的预设选项-d,

--default忽略提示符并使用默认预设选项-i,--inlinePreset<json>忽略提示符并使用内联的JSON字符串预设选项-m,--packageManager<command>在安装依赖时使用指定的npm客户端-r,--registry<url>在安装依赖时使用指定的npmregistry-g,--git[message]强制/跳过git初始化，并可选地指定初始化提交信息-n,--no-git跳过git初始化-f,--force覆写目标目录可能存在的配置-c,--clone使用gitclone获取远程预设选项-x,--proxy使用指定的代理创建项目-b,--bare创建项目时省略默认组件中的新手指导信息-h,--help输出使用帮助信息了解VueCLI项目结构打开生成好的hello-word项目文件夹，可以看到最终生成的项目结构如图所示子目录作用如下：node_modules存放项目的所有第三方依赖public存放基础模板和一些资源文件，例如index.html文件和favicon.ico文件等src存放项目的主体代码，包括静态资源、入口文件和自定义组件等其他在hello-world目录中还存在配置文件，例如package.json文件和babel.config.js文件等02webpack概述PART配置webpack调整webpack配置最简单的方式是在vue.config.js文件中的configurewebpack选项中创建一个对象，代码如下：果需要基于环境条件配置行为，或者想要直接修改配置，则需要将configurewebpack选项修改为函数，代码如下：//vue.config.jsmodule.exports={configurewebpack:{plugins:[newMyAwesomewebpackPlugin()]}}//vue.config.jsmodule.exports={configurewebpack:config=>{if(process.env.NODE_ENV==='production'){//为生产环境修改配置}else{//为开发环境修改配置}}}链式操作使用vueinspect命令可以链式访问特定的loader，代码如下：对于CSS相关的loader，推荐使用css.loaderOptions选项进行配置，而不是直接使用链式语法指定loader，代码如下：//添加一个新的loader//vue.config.jsmodule.exports={chainwebpack:config=>{//GraphQLloaderconfig.module.rule('graphql').test(/\.graphql$/).use('graphql-tag/loader').loader('graphql-tag/loader').end()//也可再添加一个loader.use('other-loader').loader('other-loader').end()}}//修改loader选项//vue.config.jsmodule.exports={chainwebpack:config=>{config.module.rule('vue').use('vue-loader').tap(options=>{returnoptions})}}替换一个规则里的loader替换一个已有的基础loader，可以使用chainwebpack()函数修改webpack配置，代码如下：//vue.config.jsmodule.exports={chainwebpack:config=>{constsvgRule=config.module.rule('svg')//清除已有的所有loader。svgRule.uses.clear()//添加要替换的loadersvgRule.use('vue-svg-loader').loader('vue-svg-loader')}}//修改插件选项//vue.config.jsmodule.exports={chainwebpack:config=>{config.plugin('html').tap(args=>{return[/*传递给html-webpack-plugin's构造函数的新参数*/]})}}审查项目的webpack配置VueCLI提供了inspect命令来检查解析好的webpack配置，相关命令如下：#只审查第一条规则vueinspectmodule.rules.0#或者指向一个规则或插件的名字：vueinspect--rulevuevueinspect--pluginhtml#最后，可以列出所有规则和插件的名字：vueinspect--rulesvueinspect--plugins03构建与部署VueCLI项目PART实例当运行vue-cli-servicebuild时，可以通过--target选项指定不同的构建目标，以允许将相同的源代码根据不同的用例生成不同的构建。应用模式的默认模式有以下特点：（1）index.html带有注入的资源和resourcehint。（2