首页 IT技术内容详情

electron + vue2.X本地运行及打包遇到的各种版本问题、文件找不到问题汇总

2021-10-05 43123 编程艺术家

electron + vue2.X本地运行及打包

ps: 打包环境为windows 7

1、开发过程中遇到各种问题,资料找了一堆,大部分都是无用的,没有给出解决方案,

或者不全面

2、从本地运行到打包成功历时一周,写下这篇博客供小伙伴参考,希望大家少走弯路

1

2

3

4

基础配置及版本

node版本 node v11.7.0

npm版本 v6.2.0

electron版本 v7.3.3

electron-packager v14.2.0

.NET Framework v4.5

powershell v5.1

ps:


1、node v14版本需要windows 10


2、electron v13.1.9需要node v14以上版本支持


3、electron-packager v14.2.0和electron v7.3.3是在2018年发布的


4、powershell必须升级到3.0以上版本,版本查看$PSVersionTable


1

2

3

4

5

6

7

8

9

10

electron electron-packager安装

# npm install

全局安装

npm install electron@7.3.3 -g

npm install electron@7.3.3 electron-packager@14.2.0 -D


# cnpm install

cnpm install electron@7.3.3 electron-packager@14.2.0 -D


建议使用npm安装,cnpm会导致未知的错误


1

2

3

4

5

6

7

8

9

10

本地运行

ps: 使用的是现有vue项目,在此基础上进行开发


文件目录

build

config

node_modules

src

static

store

.babelrc

.editorconfig

.eslintignore

.eslintrc.js

.gitignore

.postcssrc.js

index.html

main.js

package-lock.json

package.json

README.md

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

在index.html同级创建一个入口文件main.js

const {app, BrowserWindow} = require('electron');

let win;

let widowConfig = {

width: 1200,

height: 600

}

function createWindow() {

win = new BrowserWindow(widowConfig);

// 项目运行地址

win.loadURL(`http://localhost:8001`);

win.webContents.openDevTools();

win.on('close', () => {

win = null

})

// win.on('resize', () => {

// win.reload()

// })

}

app.on('ready', createWindow);

app.on('window-all-close', () => {

app.quit();

})

app.on('activate', () => {

if (win === null) {

createWindow();

}

})


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

在package.json文件,添加入口main: main.js

"main": "main.js",

"scripts": {

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"lint": "eslint --ext .js,.vue src",

"build": "node build/build.js"

}

1

2

3

4

5

6

7

本地查看效果

在编辑器vscode 运行npm run dev

项目目录下 cmd electron .

如果提示electron .不是命令,请重新安装electron

1

2

3

打包vue项目,在dist目录下再次运行

1、npm run build

2、在打包生成的dist目录下运行

将package.json copy到dist目录下

将main.js copy到目录下,并修改路径

修改前 win.loadURL(`http://localhost:8001`);

修改后 win.loadFile(path.join(__dirname, 'index.html'))

1

2

3、electron . 运行出现的问题

cd dist,然后 electron .

修改 config/index.js

build: {

assetsPublicPath: './'

}

1

2

3

接口请求路径变成 Request URL: file:///F:/acmp/2.0/login/signIn

在接口请求中拼接接口地址

let urls = process.env.NODE_ENV === 'development' ? "" : "http://xxx.com";

let config = {

    method: opt.method || 'post',

    baseURL: urls + '/acmp/2.0/',

    url: opt.url,

    params: opt.data,

    timeout: 10000,

    headers: {

      'X-Requested-With': 'XMLHttpRequest',

      // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',

      'Content-Type': headers['Content-Type'] || 'application/json; charset=UTF-8'

    }

  };

1

2

3

4

5

6

7

8

9

10

11

12

13

14

图片地址找不到

错误路径

file:///F:/ly/aipark/beijing/Acmp/slideBar/aiparkcity_acmp/static/css/static/img/bjbg.94fbc4a.jpg

正确路径

file:///F:/ly/aipark/beijing/Acmp/slideBar/aiparkcity_acmp/static/img/bjbg.94fbc4a.jpg


修改配置文件

webpack.base.conf.js

module: {

rules: [

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

use: [{

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('img/[name].[hash:7].[ext]'),

publicPath: process.env.NODE_ENV === 'production' ?

'../../' : config.dev.assetsPublicPath

}

}, {

loader: 'image-webpack-loader',

options: {

bypassOnDebug: true,

}

}]


}

]

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

静态资源找不到

# 错误路径 file:///F:/static/jquery.datetimepicker.min.css

# 绝对路径改为相对路径

<link rel=stylesheet href=/static/jquery.datetimepicker.min.css>

  <script src=/static/jquery.min.js> </script>

  <script src=/static/jquery-mousewheel.js async></script>

<script src=/static/jquery.datetimepicker.full.min.js async></script>

# 修改后

<link rel=stylesheet href=./static/jquery.datetimepicker.min.css>

  <script src=./static/jquery.min.js> </script>

  <script src=./static/jquery-mousewheel.js async></script>

  <script src=./static/jquery.datetimepicker.full.min.js async></script>

1

2

3

4

5

6

7

8

9

10

11

字体文件、css找不到

# 错误路径 file:///F:/ly/aipark/beijing/Acmp/slideBar/aiparkcity_acmp/static/css/static/fonts/element-icons.732389d.ttf

# 正确路径 file:///F:/ly/aipark/beijing/Acmp/slideBar/aiparkcity_acmp/static/fonts/element-icons.732389d.ttf

# 修改 utils.js,添加publicPath


if (options.extract) {

      return ExtractTextPlugin.extract({

        use: loaders,

        fallback: 'vue-style-loader',

        publicPath: '../../'

      })

    }

1

2

3

4

5

6

7

8

9

10

11

view-Reload 刷新出现空白页面

vue-router路由模式改为hash

 mode: 'hash'

1

2

ps: 以上问题是在dist目录下运行electron . 出现的各种问题

处理完这些问题,下面再进行打包,基本上都能一次成功

1

2

打包生成exe应用文件

在项目根目录package.json配置打包命令

name为应用名称

"name": "acmp",

"scripts": {

    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

    "start": "npm run dev",

    "lint": "eslint --ext .js,.vue src",

    "build": "node build/build.js",

    "electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./src/assets/images/favicon.ico --overwrite"

  }

1

2

3

4

5

6

7

8

9

在项目根目录下运行

npm run build

npm run electron_build

ps: 运行过程出现报错情况,请参照基础配置及版本

打包之后的文件目录


————————————————

版权声明:本文为CSDN博主「_freely」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/hbjiankely/article/details/119811209


相关标签: # vue

文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
 暂无评论,快来抢沙发吧~

发布评论