vue-cli3+ts+webpack實現多入口多出口

時間 2019-11-24

標籤 vue cli3+ts+webpack cli webpack 實現入口出口简体版

原文原文鏈接

說在前頭

最近公司有一個需求，須要在項目裏面嵌套h5的頁面，並且不止有一個嵌套的頁面，那麼就想辦法運用webpack的多入口多出口的打包模式，網上查了不少資料，也有多入口多出口的案例，github上也有相應源碼，我就不作過多講解了。這裏把博客貼出來vue多入口多出口打包，相應的多入口多出口的源碼在這裏。使用的是vue2.x + webpack3.x集成的多入口多出口，感興趣的小夥伴能夠看看。html

然而，公司領導要求項目裏面集成ts進行開發，對於字段的類型有更好的控制，因此在配合多入口多出口的前提下，還要配合ts進一步作一些調整。我本人開發路子可能前期走的野，反而加上tslint以後，被一堆類型檢查，語法困擾，無法，要適應發展嘛。小女子只得從命。因此就作了一套在webpack3.x的基礎上集成了ts，以及實現多入口多出口。當時時間比較緊張，從webpack3.x升級到webpack4.x，在實現上來講，仍是遇到了一些困難。因此後面就沒有繼續研究了。前端

近期剛辭職，有一些時間 而後也以爲webpack4.x發佈也有1年多的時間了，尚未在項目中實戰，不是一個合格的前端，終於下定決心要在webpack4.x上面指(hua)點(she)江(tian)山(zu)。 vue

本文不對ts作一些解釋，可是你若是要用ts作這個多入口的開發，那麼請前往typescript官方文檔，飽讀經書好吧！廢話少說，那麼如今進入正文：webpack

一些安裝vue-cli3的操做，如何初始化一個項目這裏也不作講解，由於我以爲網上的不少文章都說的很詳細，我以爲不必重寫一份，還請本身搜索。git

因爲我是在ts的前提下寫多入口多出口，在初始化項目的時候，已經安裝了typescript。github

創造多頁面文件

個人頁面結構以下 web

改寫文件

// login.ts
import Vue from 'vue';
import Login from './login.vue';
import router from '../../router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(Login),
}).$mount('#login');
複製代碼

在login.ts文件，也就是login.html的單頁面的main.js入口，在這裏我遇到了坑，就是若是不改爲render的形式，不報錯，可是渲染不出頁面，vue-cli

// login.vue
<template>
<div class="login">
  {{msg}}
  <router-view></router-view>
</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Login extends Vue {
  private msg = 'login';
}
</script>

<style>

</style>

複製代碼

vue-property-decorator是在vue中使用typescript在依賴vue-class-component的基礎上作的封裝的插件，聽說vue3要原生兼容ts了，是否是該拍手叫好。typescript

// login.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue_multi</title>
  </head>
  <body>
    <div id="login"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

複製代碼

html也就沒啥說的了，另外的頁面也按照一樣的方式建立就完事了。沒啥說的。bash

在根目錄下面建立vue.config.js

在vue-cli3中再也不暴露webpack的配置，若是要進行自定義配置，須要手動在根目錄建立vue.config.js，詳細配置能夠看官方文檔下面是我此次要配置多頁面的內容；

// glob是webpack安裝時依賴的一個第三方模塊，還模塊容許你使用 *等符號, 例如lib/*.js就是獲取lib文件夾下的全部js後綴名的文件
let glob = require("glob");
let merge = require("webpack-merge");

let page = function() {
  let entryHtml = glob.sync("src/views" + "/*/*.html"); // 在vue-cli3中配置文件的路徑不須要加相對路徑，也不須要找絕對路徑
  let obj = {};
  entryHtml.forEach(filePath => {
    let filename = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.lastIndexOf("."));
    let entryname = filePath.substring(0, filePath.lastIndexOf(".")); // 我爲了方便使用的html的路徑，最後只是改寫後綴
    let conf = {
      entry: entryname + '.ts', // 此處須要注意，若是引用ts和html不一樣名稱與路徑的文件，在此處作相應改寫
      template: filePath, // 此處是html文件的訪問路徑
      filename: filename + ".html",
      chunks: ["chunk-vendors", "chunk-common", filename],
    };
    if (process.env.NODE_ENV === "production") {
      conf = merge(conf, {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        },
        chunksSortMode: "dependency"
      });
    }
    obj[filename] = conf
  });
  return obj;
};

module.exports = {
  publicPath: '/', // 官方要求修改路徑在這裏作更改，默認是根目錄下，能夠自行配置
  outputDir: 'dist', //也可加標識，動態打包到相關文件夾
  pages: page(),
  productionSourceMap: false,
  devServer: {
    open: true, // 項目構建成功以後，自動彈出頁面
    host: 'localhost', // 主機名，也能夠127.0.0.0 || 作真機測試時候0.0.0.0
    port: 8081, // 端口號，默認8080
  }
}
複製代碼

由此咱們的vue-cli3 + typescript + 多入口多出口就完成了。寫完以後發現，個人天，已經快凌晨3點啦，我要睡了，古耐（😊）

最後

添一下項目源碼，能夠猛戳這裏我是看到在個人一頓搜索以後，並無看到像vue-cli3+ts集成多頁面的文章，因此但願會對你有幫助。技術文章都有時效性，不過若是我不懶的話，會不定時更新。比心！請輕噴，我仍是個新司機。有更好的方法、見解，或者發現錯誤，歡迎留言咯。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。