前言
本篇文章將采用vue-cli3來創(chuàng)建vue項目，如果之前已經(jīng)全局安裝了舊版本的vue-cli淋硝，需要先將其卸載雹熬，卸載命令如下
npm uninstall vue-cli -g
# or
yarn global remove vue-cli
Node版本要求：node.js >= 8.9
安裝：
npm install -g @vue/cli
# or
yarn global add @vue/cli
安裝完成后可以通過 vue --version 命令查看vue-cli版本。
創(chuàng)建項目：
vue create vue-cli3-demo
此時可以通過上下鍵選擇 default(默認(rèn)) 或者 Manually select features(手動選擇需要的配置)谣膳。
可選擇的配置如下：
- TypeScript：支持使用 TypeScript 書寫源碼
- Progressive Web App (PWA) Support： PWA 支持竿报。
- Router： 支持 vue-router 。
- Vuex： 支持 vuex 继谚。
- CSS Pre-processors： 支持 CSS 預(yù)處理器烈菌。
- Linter / Formatter： 支持代碼風(fēng)格檢查和格式化。
- Unit Testing： 支持單元測試。
- E2E Testing：支持 E2E 測試芽世。
根據(jù)個人需要去選擇配置挚赊，在這里我們直接選擇手動配置，選擇Babel济瓢、Router荠割、Linter/Formatter。
待項目依賴安裝好后葬荷，進入項目根目錄涨共，啟動項目
cd vue-cli3-demo
npm run serve
vue-cli3創(chuàng)建的項目目錄比2.0創(chuàng)建的更加簡潔，沒有了build和config目錄宠漩，如果需要其他配置則要自己手動配置举反。
多頁面應(yīng)用的配置
使用腳手架創(chuàng)建的vue項目均為單頁面應(yīng)用，但在實際生產(chǎn)應(yīng)用中扒吁，我們常常需要用到多頁面應(yīng)用火鼻，接下來我們將項目改為多頁面應(yīng)用：
將項目目錄調(diào)整如下：
在官方文檔中給出的解決方法是在vue.config.js配置項pages
在項目根目錄下創(chuàng)建vue.config.js文件。
具體配置請自行參看文檔：
vue.config.js配置參考文檔
配置如下：
module.exports = {
pages: {
projectA: {
// page 的入口
entry: 'src/modules/projectA/main.js',
// 模板來源
template: 'public/index.html',
// 在 dist/index.html 的輸出
filename: 'projectA.html',
// 當(dāng)使用 title 選項時雕崩，
// template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'project A Page',
// 在這個頁面中包含的塊魁索，默認(rèn)情況下會包含
// 提取出來的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'projectA']
},
// 當(dāng)使用只有入口的字符串格式時盼铁，
// 模板會被推導(dǎo)為 `public/subpage.html`
// 并且如果找不到的話粗蔚，就回退到 `public/index.html`。
// 輸出文件名會被推導(dǎo)為 `subpage.html`饶火。
projectB: {
// page 的入口
entry: 'src/modules/projectB/main.js',
// 模板來源
template: 'public/index.html',
// 在 dist/index.html 的輸出
filename: 'projectB.html',
// 當(dāng)使用 title 選項時鹏控，
// template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'project B Page',
// 在這個頁面中包含的塊，默認(rèn)情況下會包含
// 提取出來的通用 chunk 和 vendor chunk肤寝。
chunks: ['chunk-vendors', 'chunk-common', 'projectB']
}
}
}
重新啟動項目npm run serve当辐，訪問下面兩個地址即可看到多頁面的效果。
http://localhost:8080/projectA#/
http://localhost:8080/projectB#/
執(zhí)行npm run build進行編譯打包鲤看，打包結(jié)果如下：
兩個不同的項目的文件各自編譯打包缘揪，但并沒有按項目分成不同的文件夾，我們進一步修改配置义桂，將其改為按項目打包找筝。
多項目應(yīng)用按項目編譯打包到相應(yīng)的文件夾中
修改vue.config.js代碼如下：
var projectname = process.argv[3]
var glob = require('glob')
function getEntry() {
var entries = {}
if (process.env.NODE_ENV == 'production') {
entries = {
index: {
// page的入口
entry: 'src/modules/' + projectname + '/main.js',
// 模板來源
template: 'public/index.html',
// 在 dist/index.html 的輸出
filename: 'index.html',
title: projectname,
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
} else {
var items = glob.sync( './src/modules/*/*.js')
for (var i in items) {
var filepath = items[i]
var fileList = filepath.split('/');
var fileName = fileList[fileList.length-2];
entries[fileName] = {
entry: `src/modules/${fileName}/main.js`,
// 模板來源
template: `public/index.html`,
// 在 dist/index.html 的輸出
filename: `${fileName}.html`,
// 提取出來的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', fileName]
}
}
}
return entries
}
var pages = getEntry()
module.exports = {
productionSourceMap: false, // 生產(chǎn)禁止顯示源代碼
outputDir: 'dist/' + projectname,
pages: pages
}
執(zhí)行如下命令進行打包即可：
# npm run build [projectFileName]
npm run build projectA
結(jié)果如下圖所示：
源代碼：https://github.com/wushijie312/vue_MultipleProjects/tree/master/vue-cli3-demo
