快捷導(dǎo)航

vue-cli3+ts+webpack實(shí)現(xiàn)多入口多出口功能

更新時(shí)間：2019年05月30日 16:57:28 作者：zrx1118

這篇文章主要介紹了vue-cli3+ts+webpack實(shí)現(xiàn)多入口多出口功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

最近公司有一個(gè)需求，需要在項(xiàng)目里面嵌套h5的頁面，而且不止有一個(gè)嵌套的頁面，那么就想辦法運(yùn)用webpack的多入口多出口的打包模式，網(wǎng)上查了很多資料，也有多入口多出口的案例，github上也有相應(yīng)源碼，我就不做過多講解了。這里把博客貼出來vue多入口多出口打包，相應(yīng)的多入口多出口的源碼在這里。使用的是vue2.x + webpack3.x集成的多入口多出口，感興趣的小伙伴可以看看。

然而，公司領(lǐng)導(dǎo)要求項(xiàng)目里面集成ts進(jìn)行開發(fā)，對于字段的類型有更好的控制，所以在配合多入口多出口的前提下，還要配合ts進(jìn)一步做一些調(diào)整。我本人開發(fā)路子可能前期走的野，反而加上tslint之后，被一堆類型檢查，語法困擾，沒法，要適應(yīng)發(fā)展嘛。小女子只得從命。所以就做了一套在webpack3.x的基礎(chǔ)上集成了ts，以及實(shí)現(xiàn)多入口多出口。當(dāng)時(shí)時(shí)間比較緊張，從webpack3.x升級到webpack4.x，在實(shí)現(xiàn)上來說，還是遇到了一些困難。所以后面就沒有繼續(xù)研究了。

近期剛辭職，有一些時(shí)間然后也覺得webpack4.x發(fā)布也有1年多的時(shí)間了，還沒有在項(xiàng)目中實(shí)戰(zhàn)，不是一個(gè)合格的前端，終于下定決心要在webpack4.x上面指(hua)點(diǎn)(she)江(tian)山(zu)。

本文不對ts做一些解釋，但是你如果要用ts做這個(gè)多入口的開發(fā)，那么請前往https://www.tslang.cn/docs/home.html，飽讀經(jīng)書好吧！廢話少說，那么現(xiàn)在進(jìn)入正文：

一些安裝vue-cli3的操作，如何初始化一個(gè)項(xiàng)目這里也不做講解，因?yàn)槲矣X得網(wǎng)上的很多文章都說的很詳細(xì)，我覺得沒必要重寫一份，還請自己搜索。

由于我是在ts的前提下寫多入口多出口，在初始化項(xiàng)目的時(shí)候，已經(jīng)安裝了typescript。

創(chuàng)造多頁面文件

我的頁面結(jié)構(gòu)如下

改寫文件

// 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的形式，不報(bào)錯(cuò)，但是渲染不出頁面，

// 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的基礎(chǔ)上做的封裝的插件，據(jù)說vue3要原生兼容ts了，是不是該拍手叫好。

// 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也看就沒啥說的了，另外的頁面也按照同樣的方式創(chuàng)建就完事了。沒啥說的。

在根目錄下面創(chuàng)建vue.config.js

在vue-cli3中不再暴露webpack的配置，如果要進(jìn)行自定義配置，需要手動(dòng)在根目錄創(chuàng)建 vue.config.js ，詳細(xì)配置可以看官方文檔下面是我這次要配置多頁面的內(nèi)容；

// glob是webpack安裝時(shí)依賴的一個(gè)第三方模塊，還模塊允許你使用 *等符號, 例如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不同名稱與路徑的文件，在此處做相應(yīng)改寫
  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: '/', // 官方要求修改路徑在這里做更改，默認(rèn)是根目錄下，可以自行配置
 outputDir: 'dist', //也可加標(biāo)識，動(dòng)態(tài)打包到相關(guān)文件夾
 pages: page(),
 productionSourceMap: false,
 devServer: {
 open: true, // 項(xiàng)目構(gòu)建成功之后，自動(dòng)彈出頁面
 host: 'localhost', // 主機(jī)名，也可以127.0.0.0 || 做真機(jī)測試時(shí)候0.0.0.0
 port: 8081, // 端口號，默認(rèn)8080
 }
}

總結(jié)

以上所述是小編給大家介紹的vue-cli3+ts+webpack實(shí)現(xiàn)多入口多出口功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: