1、創(chuàng)建vue項目
2、創(chuàng)建配置文件
const compressionPlugin =require('compression-webpack-plugin');
const webpack =require('webpack')
module.exports = {
devServer: {
// proxy: 'http://192.168.1.14:7033' //開發(fā)環(huán)境的跨域問題解決，后端服務(wù)ip 和 端口
? ? ? ? proxy:'http://localhost:7001',
disableHostCheck:true
? ? },
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
? ? ? ? ? ? })
],
},
configureWebpack: config => {
config.module.rule('pug')
.test(/\.pug$/)
.use('pug-html-loader')
.loader('pug-html-loader')
.end()
},
pages: {
index: {
// page 的入口
// entry:['./node_modules/babel-polyfill/dist/polyfill.js','src/main.js'],
? ? ? ? ? ? entry:'src/main.js',
// 模板來源
? ? ? ? ? ? template:'public/index.html',
// 輸出文件名
? ? ? ? ? ? filename:'index.html'
? ? ? ? }
},
publicPath:'./',
assetsDir:'',
lintOnSave:false,
productionSourceMap:true,
filenameHashing:process.env.NODE_ENV ==='production' ?false :true,
configureWebpack: () => {
if (process.env.NODE_ENV ==='production') {
return {
plugins: [
new compressionPlugin({
test:/\.js$|\.html$|\.css/,
threshold:10240,
deleteOriginalAssets:false
? ? ? ? ? ? ? ? ? ? })
]
};
}
},
};
3、通過npm run build打包文件生成dist文件包
ps；若使用router進(jìn)行路由控制，則將mode: 'history',取消掉
pps：打包靜態(tài)html文件時，可將網(wǎng)絡(luò)請求地址寫死在程序內(nèi)（主要是沒有配置好可修改地址的文件）
4、cd dist文件目錄下，全局安裝electron-packager
npm install electron-packager -g
5、輸入打包命令
electron-packager . app --win --outpresenterTool --arch=x64 --electron-version4.0.5--overwrite --ignore=node_modules
ps: ?electron-packager .?可執(zhí)行文件的文件名?--win --out?打包成的文件夾名?--arch=x64位還是32位--electron-version?Electron的版本號?--overwrite --ignore=node_modules
