Vue CLI是一個全局安裝的npm包,它提供了一套完整的腳手架工具,幫助開發者快速構建Vue項目。Vue CLI提供了多種構建配置選項,其中包括靜態網站(static)。Vue CLI static選項允許我們在本地構建出一個靜態的HTML文件,可以放到CDN上或者簡單的網頁服務器上,實現輕量級的Web應用。
vue create my-static-site // 創建項目
cd my-static-site
npm run build -- --mode static // 以靜態模式構建網站
當我們使用Vue CLI static選項構建網站時,我們需要在vue.config.js文件中指定輸出目錄,可以使用相對目錄或絕對目錄。
// vue.config.js文件
module.exports = {
outputDir: 'dist', // 輸出目錄為dist
publicPath: '/' // 打包后的文件路徑為根目錄
}
使用Vue CLI static選項構建的靜態網站最大的優點在于快速部署,沒有后端服務器和數據庫,使我們能夠快速地將網站部署到各種平臺上。但缺點也顯而易見,我們無法進行數據交互和動態渲染等操作,因此它更適用于一些簡單的靜態網站,例如公司宣傳網站、個人博客等。