标签：google pac 指定 progress 使用 组织 running 运行 但我
使用vue.js做前端 + Electron做后端开发应用，不仅能像web开发那样方便开发UI，又能通过Electron使用原生模块调用和扩展功能
当前使用的操作系统为Window10
从官网下载Node.js, 安装完后在命令行下输入node 就可以执行js脚本了
G:\Working> node
> console.log('hello world')
hello world
undefined当前使用版本:
G:\Working> node -v
v10.9.0国内使用npm速度有点慢，所以建议安装CNPM淘宝镜像
npm install cnpm使用vue-cli来快速搭建vue项目主要是vue生态的标准化，项目的目录结构，入口文件都是大家熟悉的
cnpm install -g @vue/cli当前使用的版本:
G:\Working> vue -V
3.10.0vue create helloworldVue CLI v3.10.0
? Please pick a preset:
default (babel, eslint)
> Manually select featuresVue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project:
( ) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
>( ) Linter / Formatter
( ) Unit Testing
( ) E2E TestingVue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project:
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.jsonVue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project:
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n
Vue CLI v3.10.0
? Creating project in G:\Working\helloworld.
?? Initializing git repository...
? Installing CLI plugins. This might take a while...
added 958 packages from 879 contributors and audited 12068 packages in 115.58s
found 0 vulnerabilities
?? Invoking generators...
?? Installing additional dependencies...
added 3 packages from 1 contributor and audited 12072 packages in 18.392s
found 0 vulnerabilities
? Running completion hooks...
?? Generating README.md...
?? Successfully created project helloworld.
?? Get started with the following commands:
$ cd helloworld
$ npm run servesrc
│ App.vue
│ main.js
│
├─assets
│ logo.png
│
└─components
HelloWorld.vue执行 npm run serve 启动项目
G:\Working> cd helloworld
G:\Working\helloworld> npm run serve
> helloworld@0.1.0 serve G:\Working\helloworld
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 3806ms 00:11:43
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.3.6:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.此时,我们可以使用浏览器通过上而两个URL来访问我们的Vue项目了
提示使用npm run build来创建生产版本
npm run build生成了一个dist目录，里面就是打包好的发行版本了，我们用浏览器打开里面index.html文件
什么？一片空白
看看打包后的源码，原来打包后的路径开头都是 /也就是根目录，而我们需要的是相对路径
helloworld目录下添加vue.config.js文件, 并加入配置
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? './'
: './'
}然后OK了,浏览器访问没问题了，但多了个配置文件，看看能不能在代码里解决这问题呢
我们的目的是要在electron上跑VUE，所以还得安装electron.
cnpm install --save-dev electron
安装完了，可怎么能在electron 上运行vue呢?
node_modules\.bin\electron http://localhost:8080/npm run build打包vue项目 cnpm run build && electron dist/index.html但这样在build时，mode 默认为production不适合调试，因为源码都会被压缩了,调试要改成development好些
vue-cli-service build --mode development && electron dist/index.html我们是通过electron可以使用我们的VUE项目了，但我们仅仅把electron当做最简单的浏览器在使用, 我们并没有使用electron的功能，如菜单，窗口等.
查看electron的文档， 提示复制并运行这个库 electron/electron-quick-start
看看里面的main.js里怎么加载web应用的
// and load the index.html of the app.
mainWindow.loadFile('index.html')这样不就可以加截我们vue项目打包后的index.html文件了吗
index.js:
const { app, BrowserWindow } = require('electron')
let mainWindow
function createWindow () {
// 创建浏览器窗口。
mainWindow = new BrowserWindow({
width: 1024,
height: 768,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadURL(`file://${__dirname}/index.html`)
// 打开开发者工具
if (process.env.NODE_ENV === 'development') {
mainWindow.webContents.openDevTools()
}
mainWindow.on('closed', () => {
mainWindow = null
})
}
app.on('ready', createWindow)
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
参考 electron-quick-start的main.js的，我们需要实现一个electron的入口文件，但这文件放哪呢？
主进程和渲染器进程
Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。
由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。
修改package.json, 增加mian脚本
"main":"dist/index.js",把electron的入口文件Index.js从src复制到dist目录下
linux & powershell:
cp .\src\index.js .\distcmd:
copy .\src\index.js .\dist\打包vue项目
npm run build 并运行electron入口文件index.js
electron .为了以后源码的目录更清晰，重新组织一下源码结构，根据electron的进程来组织, vue项目作为渲染进程， electron入口相关的就是主进程了
当前目录结构:
src
│ App.vue
│ main.js
│ index.js
├─assets
│ logo.png
│
└─components
HelloWorld.vue重新组织后
src
├─electron
│ index.js
│
└─renderer
│ App.vue
│ main.js
│
├─assets
│ logo.png
│
└─components
HelloWorld.vue但这时我们运行npm run serve和npm run build时就会出错了，因为vue-cli找不到入口文件了,需要重新指定入口文件, 修改package.json
"scripts": {
- "serve": "vue-cli-service serve",
- "build": "vue-cli-service build"
+ "serve": "vue-cli-service serve src/renderer/main.js",
+ "build": "vue-cli-service build src/renderer/main.js"
},此时还有个问题，我们执行的electron入口文件index.js还是在src\electron目录下的，
我们在执行npm run build build Vue项目时，index.js并没有被打包到dist目录下,
这样不利于生产版本的发行等
两种把electron.js打包并放到dist目录的方式:
我选择第2种使用webpack,试运行下webpack命令， node_modules\.bin\webpack 提示是否安装webpack-cli, no,我们手动安装下
安装webpack-cli
cnpm install --save-dev webpack-cli还是去看webpakc的中文文档
官方提到这个例子，参考下
https://github.com/electron-react-boilerplate/electron-react-boilerplate
添加一个electron入口文件的webpack配置文件webpack.electron.config.js
'use strict'
const path = require('path')
module.exports = {
entry: {
main: path.join(__dirname, 'src/electron/index.js')
},
output: {
filename: 'index.js',
path: path.join(__dirname, './dist')
},
target: 'electron-main'
}打包vue项目
npm run build打包electron入口文件index.js
.\node_modules\.bin\webpack-cli --config .\webpack.electron.config.js运行electron
electron .空白？查看控制台信息，提示
Not allowed to load local resource: file://index.html原来webpack打包electron后，路径不对了
参考webpack node 配置
默认为：
__filename: 'mock',
__dirname: 'mock',
更改webpack.electron.config.js，打包后不使用真实路径
node: {
__dirname: false,
__filename: false
},重新打包运行electron
.\node_modules\.bin\webpack-cli --config .\webpack.electron.config.js
electron .成功运行
看到不少项目使用electron-builder,就用这个吧
electron-buildercnpm install --save-dev electron-builder参考文档修改package.json, 添加build字段:
"build": {
"productName": "helloworld",
"appId": "nononoone.helloworld",
"npmRebuild": false,
"electronDownload": {
"mirror": "https://npm.taobao.org/mirrors/electron/",
"isVerifyChecksum": false
},
"directories": {
"output": "build"
},
"files": [
"dist/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/icon.ico",
"extraResources": [
"./dist/**/*.dll"
]
},
"linux": {
"icon": "build/icons"
}
},运行electron-builder命令:
.\node_modules\.bin\electron-builder过程中要下载electron-builder的依赖文件真的慢死了，不过最终还是下完了
最后生成了一个build目录:
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2019/8/18 1:52 win-unpacked
-a---- 2019/8/18 1:50 549 builder-effective-config.yaml
-a---- 2019/8/18 1:53 43837331 helloworld Setup 0.1.0.exe
-a---- 2019/8/18 1:53 45860 helloworld Setup 0.1.0.exe.blockmapwin-unpacked目录相当于绿色版
helloworld Setup 0.1.0.exe就是安装包了
到此helloworld从开始到发布的基本流程就走完了
整个流程我们是走完了，但很多命令都是通过手动完成的，我们需要整理完善
修改package.json和完善脚本命令：
"scripts": {
"pack": "vue-cli-service build src/renderer/main.js && webpack-cli --config webpack.electron.config.js",
"build": "npm run pack && electron-builder",
"pack:dev": "vue-cli-service build src/renderer/main.js --mode development && webpack-cli --mode development --config webpack.electron.config.js",
"debug": "npm run pack:dev && electron .",
"serve": "npm run debug"
},对比vue-cli创建的初始项目:
$ git status
On branch master
Changes not staged for commit:
(use "git add/rm <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: .gitignore
modified: package.json
deleted: src/App.vue
deleted: src/assets/logo.png
deleted: src/components/HelloWorld.vue
deleted: src/main.js
Untracked files:
(use "git add <file>..." to include in what will be committed)
src/electron/
src/renderer/
vue.config.js
webpack.electron.config.js
"开发过程日志.md"
no changes added to commit (use "git add" and/or "git commit -a")
到此，一个简单的vue + electron 开发模板就完成了，但这是不够的，还有很多工作要做，如
elist,babel等插件ffi等所以接下来看看在helloworld的基础上如何进一步搭建我的世界
项目地址https://github.com/nononoone/helloworld
helloworld of vue + electron 开发过程日志
标签：google pac 指定 progress 使用 组织 running 运行 但我
原文地址：https://www.cnblogs.com/liangtian/p/11371284.html
