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