2024年Web前端最全第十一章：Electron-Vue创建项目，面试阿里P7岗

前端资料汇总

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

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

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()

}

})

if (shouldQuit) {

app.quit()

}

• 安装electron-squirrel-startup

npm i electron-squirrel-startup --save

不能使用npm打包会报错

在主进程的最上面添加

if (require(‘electron-squirrel-startup’)) {

app.quit();

}

• nsis配置

“nsis”: {

“oneClick”: false,

“allowToChangeInstallationDirectory”: true,

“allowElevation”: true,

“createDesktopShortcut”: true,

“createStartMenuShortcut”: true

}

‘nsis’: {

// 是否一键安装，建议为 false，可以让用户点击下一步、下一步、下一步的形式安装程序，如果为true，当用户双击构建好的程序，自动安装程序并打开，即：一键安装（one-click installer）

‘oneClick’: false,

// 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。

‘allowElevation’: true,

// 允许修改安装目录，建议为 true，是否允许用户改变安装目录，默认是不允许

‘allowToChangeInstallationDirectory’: true,

// 安装图标

‘installerIcon’: ‘build/installerIcon_120.ico’,

// 卸载图标

‘uninstallerIcon’: ‘build/uninstallerIcon_120.ico’,

// 安装时头部图标

‘installerHeaderIcon’: ‘build/installerHeaderIcon_120.ico’,

// 创建桌面图标

‘createDesktopShortcut’: true,

// 创建开始菜单图标

‘createStartMenuShortcut’: true,

// electron中LICENSE.txt所需要的格式，并非是GBK，或者UTF-8，LICENSE.txt写好之后，需要进行转化，转化为ANSI

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

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

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader