vue3多页面运行与打包

　　前言
　　现实应用环境，会有使用vue开发多页面环境的需求，这些页面拥有共同的依赖，但是却又都是独立的，为了实现vue的多页面打包，可以使用webpack，同时又因为vue-cli自带了webpack，所以我们还可以采用vue-cli本身的配置文件进行多页打包操作。
　　VUE3多页面打包
　　方式一：webpack配置
　　webpack安装参考：[安装 | webpack 中文网]。
　　直接在package.json同级目录下创建webpack.config.js(创建一个webpack的配置文件即可)，然后在配置文件内输入内容：/**  *配置  * */  /*path处理模块，可有可无，主要是为了方便路径链接，因为在配置文件内对于参数而言只接受绝对路径，利用path.resovle(__dirname, 相对路径)可以自动生成绝对路径，此模块为webpack自带*/  let path = require(＂path＂)  /*vue-loader,vue加载插件，使用npm install vue-loader直接安装即可  *同时对于vue3而言需要单独安装@vue/compiler-sfc,vue2的话是vue-compiler  */  let vueLoader = require(＂vue-loader＂)  /*html-webpack-plugin,模版处理插件，如果存在多个html模版就需要安装  *直接用npm install html-webpack-plugin  */  let htmlWebPackPlugin = require(＂html-webpack-plugin＂)  /**  *compression-webpack-plugin，这是一个可选插件，目的是为了对打包后的文件进行压缩，因为打包后会形成一个大的js文件，文件越大网页打开速度越慢。  */  let compressionWebpackPlugin = require(＂compression-webpack-plugin＂)  module.exports = {  /*打包入口，多入口就是从这里来的，当打包时，会去找到每一个入口文件，  并根据这个文件依赖去打包，每一个入口写一个key-value对*/  entry: {  /*key-value格式  key就是标识名称，之所以写成 ＂/js/index/index＂ 格式是为了在打包时将文件输出到对应目录，  默认情况下，文件只会输出到output所指定的目录下，之后便没有区分，这里用＂/＂分割就是利用输出路径时小漏洞形成目录*/  /*value是要打包入口的地址，利用path.resolve处理绝对路径问题*/  ＂/js/index/index＂: path.resolve(__dirname, ＂./src/entry/index.js＂),  ＂/js/index2/index2＂: path.resolve(__dirname, ＂./src/entry/index2.js＂)  },  /*文件输出目录，只能有一个，[官方要求](https://www.webpackjs.com/concepts/output/)*/  output: {  /*输出的入口文件的名称，【name】就是刚才上面我们指定的key值，这个值不能通过外部变量或数组动态修改*/  filename: ＂[name].js＂,  /*输出目录，也需要指定绝对路径*/  path: path.resolve(__dirname, ＂./dist＂)  },  /*插件配置与加载*/  plugins: [  /*加载vue文件打包插件*/  new vueLoader.VueLoaderPlugin,  /*html模版打包插件，有几个入口就要用几个，书写顺序与上方入口顺序一致，  如果只有一个，那么所有入口都会通过这一个模版打包*/  new htmlWebPackPlugin({  template: path.resolve(__dirname, ＂./public/html/index.html＂),  filename: ＂index.html＂  }),  new htmlWebPackPlugin({  template: path.resolve(__dirname, ＂./public/html/index2.html＂),  filename: ＂xxjszx.html＂  }),  /*加载压缩插件，将test中查找到的文件类型全部压缩，test的值对应的是一个正则表达式*/  new compressionWebpackPlugin({  test: /.js$|.html$|.css$|.jpg$|.png$/,  threshold: 100000,  deleteOriginalAssets: false  })  ],  module:{  /*文件处理规则*/  rules: [  {  /*css处理规则，直接用css-loader插件默认加载，css-loader插件也需要使用npm安装*/  test: /.css$/,  use: [＂style-loader＂, ＂css-loader＂]  },  {  /*vue文件加载规则*/  test: /.vue$/,  use: [＂vue-loader＂]  },  {  /*图片文件处理规则，使用url-loader插件改写文件名并放到指定位置*/  test: /.(jp?g|png|svg|ico)$/,  use: ＂url-loader?limit=2048&name=./img/[hash:8].[name].[ext]＂  }  ]  }  }
　　方式二：vue-cli配置
　　vue-cli目前已不提供vue.config.js配置文件，但是我们可以手动在package.json同级目录创建一个，创建成功后此文件将作为优先调用对象，结构与内容同webpack类似（其实就是内置的webpack配置），可参考官网配置解释：配置参考 | Vue CLI：module.exports = {  /*pages指定入口，同样是key-value对的形式，只不过是将配置集成到了一起*/  pages: {  /*名称*/  xxjszx: {  /*入口，同上面的entry*/  entry: ＂src/entry/xxjszx.js＂,  /*模版，同上面的html-webpack-plugin插件*/  template: ＂public/html/xxjszx.html＂,  /*输出后的文件名称*/  filename: ＂xxjszx.html＂,  },  index: {  entry: ＂src/entry/index.js＂,  template: ＂public/html/index.html＂,  /*这里是html输出到的文件地址，也可以利用/斜杠表示目录，例如index/index.html就代表创建index目录并把index.html放到目录下*/  filename: ＂index.html＂,  }  }  }
　　vue3多页面直接运行
　　使用vue.config.js配置好后，直接使用npm run dev命令即可，对应vue的vue-cli-service serve，运行可根据pages定义的key值进行路由调用页面，key值为index那么调用格式就是/index,默认页面是index路由对应页面。如果采用webpack打包是无法直接运行多页面的，需要在打包后部署到服务器上。