vue-cli可以配置vue.config.js的pages選項，實現多頁面應用開發
module.exports = ,
// 當使用只有入口的字串格式時，
// 模板會被推導為 `public/subpage.html`
// 並且如果找不到的話，就回退到 `public/index.html`。
// 輸出檔名會被推導為 `subpage.html`。
subpage: "src/subpage/main.js",
},};
通過vue-cli腳手架初始化乙個預設工程，修改專案目錄
├── assets
│ └── logo.png
├── components
│ ├── about.vue
│ ├── helloworld.vue
│ └── home.vue
├── pages
│ ├── page1
│ │ ├── page1.html
│ │ ├── page1.js
│ │ └── page1.vue
│ └── page2
│ ├── page2.html
│ ├── page2.js
│ └── page2.vue
└── style
├── common.css
└── common.less
1.2vue.config.js配置
let path = require("path");
let glob = require("glob");
//配置pages多頁面獲取當前資料夾下的html和js
function getentry(globpath) ,
basename,
tmp,
pathname,
glob.sync(globpath).foreach(function (entry) ;
});return entries;
}let pages = getentry("./src/pages/**?/*.html");
console.log(pages);
//配置end
module.exports = ;
├── css
│ ├── page1.9951d5a1.css
│ └── page2.009d0d6f.css
├── img
│ └── logo.82b9c7a5.png
├── js
│ ├── chunk-vendors.f061f10e.js
│ ├── page1.5a5322e0.js
│ └── page2.db57562b.js
├── page1.html
└── page2.html
@vue/cli-service通過判斷是否傳入pages引數來生成對應 webpack 配置檔案
如果配置了pages選項，則會執行下面步驟:
清除原有entry
對pages欄位的每個key做迴圈，解析每個入口物件的引數entry(必選)、title、template、filename、chunks
通過entry欄位生成 webpack 的entry入口
const multipageconfig = options.pages
if (!multipageconfig)
}else : c
pages.foreach(name => .html`,
filename = `$.html`,
chunks = ['chunk-vendors', 'chunk-common', name]
} = pageconfig
const customhtmloptions = {}
for (const key in pageconfig)
}// inject entry
const entries = array.isarray(entry) ? entry : [entry]
webpackconfig.entry(name).merge(entries.map(e => api.resolve(e)))
// resolve page index template
const hasdedicatedtemplate = fs.existssync(api.resolve(template))
const templatepath = hasdedicatedtemplate
? template
: fs.existssync(htmlpath)
? htmlpath
: defaulthtmlpath
publiccopyignore.push(api.resolve(templatepath).replace(/\\/g, '/'))
// inject html plugin for the page
const pagehtmloptions = object.assign(
{},htmloptions,
,customhtmloptions
)webpackconfig
.plugin(`html-$`)
.use(htmlplugin, [pagehtmloptions])
})}
vue cli和webpack多頁面配置
注 這裡使用的是vue腳手架一鍵部署 1 build檔案目錄下的webpack.base.conf.js檔案 main.js的路徑 entry 2 build檔案目錄下的webpack.dev.conf.js檔案 index.html new htmlwebpackplugin newhtmlweb...
vue cli 跨域問題 多頁面
vue.config.js 配置 建立config專案和src同一級別 config中的 配置反向 解決跨域問題 例如 ajax target 表示uri module.exports foo 請求 如下 在index.html 同級別建立所需的頁面 例如other.html 在main.vue 同...
vue cli3 建立多頁面應用
改變後的目錄結構 修改main.js的檔案引用位址 import vue from vue import router from router import store from store vue.config.productiontip false new vue mobile 當使用只有入口的...