vue3多页面运行与打包

　　前言
　　现实应用环境，会有使用vue开发多页面环境的需求，这些页面拥有共同的依赖，但是却又都是独立的，为了实现vue的多页面打包，可以使用webpack，同时又因为vuecli自带了webpack，所以我们还可以采用vuecli本身的配置文件进行多页打包操作。
　　VUE3多页面打包
　　方式一：webpack配置
　　webpack安装参考：〔安装webpack中文网〕。
　　直接在package。json同级目录下创建webpack。config。js（创建一个webpack的配置文件即可），然后在配置文件内输入内容：配置path处理模块，可有可无，主要是为了方便路径链接，因为在配置文件内对于参数而言只接受绝对路径，利用path。resovle（dirname，相对路径）可以自动生成绝对路径，此模块为webpack自带letpathrequire（path）vueloader，vue加载插件，使用npminstallvueloader直接安装即可同时对于vue3而言需要单独安装vuecompilersfc，vue2的话是vuecompilerletvueLoaderrequire（vueloader）htmlwebpackplugin，模版处理插件，如果存在多个html模版就需要安装直接用npminstallhtmlwebpackpluginlethtmlWebPackPluginrequire（htmlwebpackplugin）compressionwebpackplugin，这是一个可选插件，目的是为了对打包后的文件进行压缩，因为打包后会形成一个大的js文件，文件越大网页打开速度越慢。letcompressionWebpackPluginrequire（compressionwebpackplugin）module。exports｛打包入口，多入口就是从这里来的，当打包时，会去找到每一个入口文件，并根据这个文件依赖去打包，每一个入口写一个keyvalue对entry：｛keyvalue格式key就是标识名称，之所以写成jsindexindex格式是为了在打包时将文件输出到对应目录，默认情况下，文件只会输出到output所指定的目录下，之后便没有区分，这里用分割就是利用输出路径时小漏洞形成目录value是要打包入口的地址，利用path。resolve处理绝对路径问题jsindexindex：path。resolve（dirname，。srcentryindex。js），jsindex2index2：path。resolve（dirname，。srcentryindex2。js）｝，文件输出目录，只能有一个，〔官方要求〕（https：www。webpackjs。comconceptsoutput）output：｛输出的入口文件的名称，【name】就是刚才上面我们指定的key值，这个值不能通过外部变量或数组动态修改filename：〔name〕。js，输出目录，也需要指定绝对路径path：path。resolve（dirname，。dist）｝，插件配置与加载plugins：〔加载vue文件打包插件newvueLoader。VueLoaderPlugin，html模版打包插件，有几个入口就要用几个，书写顺序与上方入口顺序一致，如果只有一个，那么所有入口都会通过这一个模版打包newhtmlWebPackPlugin（｛template：path。resolve（dirname，。publichtmlindex。html），filename：index。html｝），newhtmlWebPackPlugin（｛template：path。resolve（dirname，。publichtmlindex2。html），filename：xxjszx。html｝），加载压缩插件，将test中查找到的文件类型全部压缩，test的值对应的是一个正则表达式newcompressionWebpackPlugin（｛test：。js。html。css。jpg。png，threshold：100000，deleteOriginalAssets：false｝）〕，module：｛文件处理规则rules：〔｛css处理规则，直接用cssloader插件默认加载，cssloader插件也需要使用npm安装test：。css，use：〔styleloader，cssloader〕｝，｛vue文件加载规则test：。vue，use：〔vueloader〕｝，｛图片文件处理规则，使用urlloader插件改写文件名并放到指定位置test：。（jp？gpngsvgico），use：urlloader？limit2048name。img〔hash：8〕。〔name〕。〔ext〕｝〕｝｝
　　方式二：vuecli配置
　　vuecli目前已不提供vue。config。js配置文件，但是我们可以手动在package。json同级目录创建一个，创建成功后此文件将作为优先调用对象，结构与内容同webpack类似（其实就是内置的webpack配置），可参考官网配置解释：配置参考VueCLI：module。exports｛pages指定入口，同样是keyvalue对的形式，只不过是将配置集成到了一起pages：｛名称xxjszx：｛入口，同上面的entryentry：srcentryxxjszx。js，模版，同上面的htmlwebpackplugin插件template：publichtmlxxjszx。html，输出后的文件名称filename：xxjszx。html，｝，index：｛entry：srcentryindex。js，template：publichtmlindex。html，这里是html输出到的文件地址，也可以利用斜杠表示目录，例如indexindex。html就代表创建index目录并把index。html放到目录下filename：index。html，｝｝｝
　　vue3多页面直接运行
　　使用vue。config。js配置好后，直接使用npmrundev命令即可，对应vue的vuecliserviceserve，运行可根据pages定义的key值进行路由调用页面，key值为index那么调用格式就是index，默认页面是index路由对应页面。如果采用webpack打包是无法直接运行多页面的，需要在打包后部署到服务器上。