vue-cli3配置多項目并按項目分別實現(xiàn)打包
vue-cli3配置多項目并按項目分別打包
demo地址:https://github.com/lmy01/vue-multipage
本次項目由于分為客戶端和客服端,第一反應便是在vue中構(gòu)建多頁面。
項目結(jié)構(gòu)
這里主要講解下面所標文件的用處
vue.config.js相關配置
配置好之后,運行npm run build,項目被打包到dist文件夾下,結(jié)果如下圖:
可以看出不同項目的資源都會打包到了一起,但這不是我想要的結(jié)果,那么接下來只需要修改一下vue.config.js配置,即可使打包的文件按照項目進行分離。
let projectName = process.argv[3] let glob = require('glob') function getEntry() { let entries = {} if (process.env.NODE_ENV == 'production') { entries = { index: { // page的入口 entry: 'src/views/' + projectName + '/'+projectName+'.js', // 模板來源 template: 'public/'+projectName+'.html', // 在 dist/index.html 的輸出 filename: 'index.html', title: 'CIMS--'+projectName, chunks: ['chunk-vendors', 'chunk-common', 'index'] } } } else { let items = glob.sync( './src/views/*/*.js') for (let i in items) { let filepath = items[i] let fileList = filepath.split('/'); let fileName = fileList[fileList.length-2]; entries[fileName] = { entry: `src/views/${fileName}/${fileName}.js`, // 模板來源 template: `public/${fileName}.html`, // 在 dist/index.html 的輸出 filename: `${fileName}.html`, title:`CIMS--${fileName}`, // 提取出來的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', fileName] } } } return entries } let pages = getEntry() module.exports = { outputDir: 'dist/' + projectName, productionSourceMap: false, pages:pages, }
注意
這時候再打包需要逐個對項目進行打包,npm run build client npm run build console
下面就是打包后的每個項目文件夾下的文件。
但是我們發(fā)現(xiàn)public里面的模板文件也被打包進來了,這是因為public是專門存放靜態(tài)文件的,打包的時候會把public里的內(nèi)容原樣輸出到打包后的文件夾中,如果我們不想讓他打包進去,那么就把模板文件從public文件夾中拿出來,我們在項目根目錄下重新建一個文件夾(/html),用來存放這兩個模板文件。
最后一步
把vue.config.js配置里的模板文件路徑修改一下。
運行npm run build client 和 npm run build console,發(fā)現(xiàn)原來的模板文件沒有了。
補充:開發(fā)環(huán)境如何進入不同項目環(huán)境
npm run dev 后,瀏覽器會打開一個頁面并提示找不到路徑
這是因為沒有進入到具體某個項目環(huán)境,這時只需要再路徑后面加上/項目名即可打開指定項目,例如
這時回車后,會進入到該項目的路由配置的’’/’'頁面中。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue的v-if里實現(xiàn)調(diào)用函數(shù)
這篇文章主要介紹了vue的v-if里實現(xiàn)調(diào)用函數(shù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07vue?eslint報錯:Component?name?“xxxxx“?should?always?be?
新手在使用腳手架時總會報各種錯,下面這篇文章主要給大家介紹了關于vue?eslint報錯:Component?name?“xxxxx“?should?always?be?multi-word.eslintvue的4種解決方案,需要的朋友可以參考下2022-07-07vue設置全局變量5種方法(讓你的數(shù)據(jù)無處不在)
這篇文章主要給大家介紹了關于vue設置全局變量的5種方法,通過設置的方法可以讓你的數(shù)據(jù)無處不在,在項目中經(jīng)常會復用一些變量和函數(shù),比如用戶的登錄token,用戶信息等,這時將它們設為全局的就顯得很重要了,需要的朋友可以參考下2023-11-11Vue2+Elementui?Dialog實現(xiàn)封裝自定義彈窗組件
在日常的管理系統(tǒng)界面中,我們寫的最多的除了列表表格之外,就是各種彈窗組件,本文就來為大家詳細介紹一下Vue2如何結(jié)合Elementui?Dialog實現(xiàn)封裝自定義彈窗組件,希望對大家有所幫助2023-12-12