Webstrom 打包vue项目并使用electron生成桌面程
1、创建vue项目
2、创建配置文件
const compressionPlugin =require('compression-webpack-plugin');
const webpack =require('webpack')
module.exports = {
devServer: {
// proxy: 'http://192.168.1.14:7033' //开发环境的跨域问题解决，后端服务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进行路由控制，则将mode: 'history',取消掉
pps：打包静态html文件时，可将网络请求地址写死在程序内（主要是没有配置好可修改地址的文件）
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 . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位--electron-version Electron的版本号 --overwrite --ignore=node_modules
