以前只见过,但是一直没时间来玩玩,最近公司有需求重构某个应用做桌面程序,便开始了探索之路
文档:https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
我的环境:
node:14.7
yarn:1.22.4
Windows10专业版
# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev
有个警告,也不知道是个啥,暂且不管,官方推荐 yarn安装(先安装yarn,npm install -g yarn),反正我试了npm慢的一P(没钱买梯子),用cnpm后面build的时候会报错,看网上都说不能用cnpm,故我也用上了yarn ( yarn install ),会报错找不到python,咱也先不管了。
然后就兴高采烈的 yarn run dev,结果
ERROR in Template execution failed: ReferenceError: process is not defined
ERROR in ReferenceError: process is not defined
- index.ejs:11 eval
[.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:11:2
- index.ejs:16 module.exports
[.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:16:3
- index.js:284
[electron-demo]/[html-webpack-plugin]/index.js:284:18
- runMicrotasks
- task_queues.js:93 processTicksAndRejections
internal/process/task_queues.js:93:5
然后找到https://github.com/SimulatedGREG/electron-vue/issues/979
//.electron-vue/webpack.renderer.config.js 修改
// find the rendererConfig variable
let rendererConfig = {
// then, find the plugins property
plugins: [
// then, replace the call to the HtmlWebpackPlugin constructor
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
//添加这两行
isBrowser: false,
isDevelopment: process.env.NODE_ENV !== 'production',
nodeModules: process.env.NODE_ENV !== 'production'
? path.resolve(__dirname, '../node_modules')
: false
}),
]
}
// ./src/index.ejs 修改
<div id="app"></div>
<!-- Set `__static` path to static files in production -->
<% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
<script>
window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
</script>
<% } %>
// ./src/main/index.js 修改
function createWindow () {
// add the webPreferences property passed to BrowserWindow
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
webPreferences: {
nodeIntegration: true,
nodeIntegrationInWorker: true
}
})
}
保存完,界面就出来了
其实还会看到(调试工具预装不上)
yarn add vue-devtools --dev
//修改main/index.dev.js:
//添加
import { BrowserWindow } from 'electron'
//修改
require('electron').app.on('ready', () => {
// let installExtension = require('electron-devtools-installer')
// installExtension.default(installExtension.VUEJS_DEVTOOLS)
// .then(() => {})
// .catch(err => {
// console.log('Unable to install `vue-devtools`: \n', err)
// })
BrowserWindow.addDevToolsExtension('node_modules/vue-devtools/vender')
})
这时还会报错
[11564:0822/230100.149:ERROR:CONSOLE(7574)] "Extension server error: Operation failed: : has no execution context", source: chrome-devtools://devtools/bundled/inspector.js (7574)
搞不懂了,先不管,其实vue调试工具已经出来了