vue-cli3多環境多入口，分別打包

1、安裝
1.Vue CLI 3須要 nodeJs ≥ 8.9 ，查看node版本升級，升級一下
2.查看版本vue -V，安裝vue-cli3，npm install -g @vue/cli
2、使用
1.vue create projectname 搭建新項目：vue create vue-cli3

選擇默認default(基本的 Babel + ESLint)配置，仍是 Manually手動配置，是由上下鍵控制
vue-cli3.0會在你建立後會有一個保存當前配置的功能，這裏以前沒有因此只有兩個選項
咱們通常選擇手動

通常不要選擇eslint 檢驗你的代碼，不然你可能會遇到不少麻煩
通常採用 vue-router（路由必備）,vuex（全家桶的狀態管理器）,sass（css擴展語言）,babel(使項目可用es6)
（你的項目決定你用什麼）空格多選
TypeScript
PWA
Vue-router
Vuex
CSS預處理
eslint prettier
自動化測試單元測試 、e2e

以後會問你是否把此次設置保存，我選擇N

按照命令cd vue-cli三、npm run serve，就搭建成功了。

3、項目目錄講解
dist 目錄爲 運行 npm run build 構建後的項目
main.js 爲入口文件
vue.config.js 爲項目配置文件，vue.config.js是須要本身建，詳細配置能夠看官方文檔

接下來，挪挪文件，新建一個ui文件夾及相關文件，我把本身的項目目錄建成這樣

這裏重要代碼有index文件夾下 index/App.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <br />
    <div>
      <a href="ui.html">跳轉新的頁面</a>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  mounted () {
    console.log(this)
    console.log(this.$router)
  }
}

</script>
<style>
  #nav {
    background: cadetblue;
    text-align: center
  }

  #nav>a {
    display: inline;
    padding: 5px 10px;
  }

</style>

對應的主文件 index/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

對應的 index/router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './About.vue')
    }
  ]
})

另外一個ui文件下的也相似，ui/ui.vue

<template>
  <div id="nav">
    <router-link to="/">page1</router-link>
    <router-link to="/page2">page2</router-link>
    <br />
    <div>
      <a href="index.html">跳轉新的頁面</a>
    </div>
    <router-view />
  </div>
</template>
<style>
  #nav {
    background: violet;
    text-align: center
  }

  #nav>a {
    display: inline;
    padding: 5px 10px;
  }

</style>

對應的 ui/main.js

import Vue from 'vue'
import Ui from './ui.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(Ui)
}).$mount('#app')

對應的 ui/router.js

import Vue from 'vue'
import Router from 'vue-router'
import Page from './page1.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'page',
      component: Page
    },
    {
      path: '/page2',
      name: 'page2',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './page2.vue')
    }
  ]
})

對應的vue.config.js的代碼

運行npm run serve 以後能夠經過a標籤跳轉不一樣的頁面

4、分別打包
想法是根據不一樣指令傳參，打包不一樣文件

![圖片上傳中...]

修改vue.config.js代碼
注意：publicPath: ‘./’, 根據本身路徑配置，不然打包後的js和css引用的路徑不對

let objectProject = {
  index: {
    entry: 'src/views/index/main.js', // page 的入口
    template: 'src/public/index.html', // 模板來源
    filename: 'index.html', // 在 dist/index.html 的輸出
    // 在這個頁面中包含的塊，默認狀況下會包含,提取出來的通用 chunk 和 vendor chunk。
    chunks: ['chunk-vendors', 'chunk-common', 'index']
  },
  ui: {
    entry: 'src/views/ui/main.js',
    template: 'src/public/ui.html',
    filename: 'ui.html',
    chunks: ['chunk-vendors', 'chunk-common', 'ui']
  }
}
let page = {}
let projectname = process.argv[3] // 獲取build後面的參數肯定執行哪一個文件
if (process.env.NODE_ENV == 'development') {
  page = objectProject//判斷開發環境不用
} else {
  //假如命令npm run build-index,
  //就會獲得projectname=index
  page[projectname] = objectProject[projectname]
  // {
  //   index: {
  //     entry: 'src/views/index/main.js',
  //     template: 'public/index.html', 
  //     filename: 'index.html',
  //     chunks: ['chunk-vendors', 'chunk-common', 'index']
  //   }
  // }
}
module.exports = {
  publicPath: '/', // 官方要求修改路徑在這裏作更改，默認是根目錄下，能夠自行配置
  outputDir: 'dist'+projectname, //標識是打包哪一個文件
  pages: page,
  productionSourceMap: false,
  devServer: {
    open: true, // 項目構建成功以後，自動彈出頁面
    host: 'localhost', // 主機名，也能夠127.0.0.0 || 作真機測試時候0.0.0.0
    port: 8081, // 端口號，默認8080
    https: false, // 協議
    hotOnly: false // 沒啥效果，熱模塊，webpack已經作好了
  }
}

打包以後效果，這樣就簡單完成了一個小demo

demo源碼：https://github.com/chenshuang...