源碼地址:https://github.com/13476075014/04.node-vue-project/tree/master/03.singlewebpack/02.ejsHtml
具體配置和前面寫的一篇打包靜態html的類似:https://www.cnblogs.com/chun321/p/11996410.html
一:安裝依賴修改配置
npm install ejs-loader --save-dev
在webpack.config.js中修改配置:在module中添加ejs解析 {test: /\.ejs$/, loader: 'ejs-loader'}
二:新建ejs公用模版和引入需要使用的ejs頁面
根目錄新建 common的文件夾,存放公用的組件,新建公用的頭部common_header.ejs,和公用的底部common_bottom.ejs文件;
具體文件如下:

views文件夾下面是需要在瀏覽器中訪問的頁面,在里面引入公用的ejs模版,方法如下,這里引入模版和ejs的語法有點不一致,是依照ejs-loader的標准寫的:
<%=require('_common/common_header.ejs')({title:'this is one'}) %> </head> <body> <h1>這是1</h1> <!-- 引入的公用的底部 --> <%=require('_common/common_bottom.ejs')() %>
使用的是require的方法而不是include 的方法,而且require后需要加上括號調用這個方法或者傳參數;
三:其他
其余的步驟基本和前面寫的打包靜態html一致,可以參考前面的,運行項目本地調試 npm start ,發布到線上打包 npm run
prodbuild ,只需要把dist里面的靜態文件放到遠程服務器,然后配置路由和靜態文件的訪問即可