第十一章：Electron-Vue创建项目

修改前：

修改后：

plugins: [

new VueLoaderPlugin(),

new MiniCssExtractPlugin({filename: ‘styles.css’}),

new HtmlWebpackPlugin({

filename: ‘index.html’,

template: path.resolve(__dirname, ‘…/src/index.ejs’),

templateParameters(compilation, assets, options) {

return {

compilation: compilation,

webpack: compilation.getStats().toJson(),

webpackConfig: compilation.options,

htmlWebpackPlugin: {

files: assets,

options: options

},

process,

};

},

minify: {

collapseWhitespace: true,

removeAttributeQuotes: true,

removeComments: true

},

nodeModules: false

}),

new webpack.DefinePlugin({

‘process.env.IS_WEB’: ‘true’

}),

new webpack.HotModuleReplacementPlugin(),

new webpack.NoEmitOnErrorsPlugin()

],

2、webpack.renderer.config.js

修改前：

修改后：

plugins: [

new VueLoaderPlugin(),

new MiniCssExtractPlugin({filename: ‘styles.css’}),

new HtmlWebpackPlugin({

filename: ‘index.html’,

template: path.resolve(__dirname, ‘…/src/index.ejs’),

templateParameters(compilation, assets, options) {

return {

compilation: compilation,

webpack: compilation.getStats().toJson(),

webpackConfig: compilation.options,

htmlWebpackPlugin: {

files: assets,

options: options

},

process,

};

},

minify: {

collapseWhitespace: true,

removeAttributeQuotes: true,

removeComments: true

},

nodeModules: process.env.NODE_ENV !== ‘production’

? path.resolve(__dirname, ‘…/node_modules’)

false

}),

new webpack.HotModuleReplacementPlugin(),

new webpack.NoEmitOnErrorsPlugin()

],

• 运行结果（npm run dev）

---

让vscode代码提示

当前项目下

cnpm install electron --save

使用 js-cookie

cnpm i js-cookie

---

打包

npm run build

• 问题一：Error: Unresolved node modules: vue, highcharts,***

解决方案

删除node_modules

使用 npm install (不是使用cnpm会出问题)

• 问题二：electron 打包一直downloading

在 文件夹跟目录下新建文件 .npmrc，内容如下：

electron_mirror=http://npm.taobao.org/mirrors/electron/

registry=https://registry.npm.taobao.org

再次进行num run build 速度就会快起来

• 项目的图片资源报错

图片资源不要放在assets中，放在static目录下

path.join(__static, ‘yuma.png’)

• 左上角的图标不显示

这是build/icons/icon.ico制作的问题，可以选择IconWorkshop软件来制作

• 左上角默认系统名称

在主进程中设置

//设置系统名称（也是初始化左上角名称——项目名称在index.ejs中修改）

app.setName(“舆情监控系统”)

• 启动时白屏

在主进程中

mainWindow = new BrowserWindow({

height: 800,

useContentSize: true,

width: 1200,

show: false //先隐藏

})

mainWindow.loadURL(winURL)

mainWindow.on(‘ready-to-show’, () => {

mainWindow.show() //初始化后再显示

//右键菜单

require(‘./model/menu’)

//系统托盘

require(‘./model/tray’)

})

注意require引入时要放在mainWindow.show()之后，否则报错

• 点击桌面图标只开启一个应用

在主进程中底部直接添加

const shouldQuit = app.makeSingleInstance((commandLine, workingDirectory) => {

// Someone tried to run a second instance, we should focus our window.

if (mainWindow) {

if (mainWindow.isMinimized()) mainWindow.restore()

mainWindow.focus()

mainWindow.show()

}

})

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

eSingleInstance((commandLine, workingDirectory) => {

// Someone tried to run a second instance, we should focus our window.

if (mainWindow) {

if (mainWindow.isMinimized()) mainWindow.restore()

mainWindow.focus()

mainWindow.show()

}

})

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-hlEdgwfB-1714199063501)]