NPM node vue打包笔记

1.设置淘宝的镜像

npm config set registry https://registry.npmmirror.com

2.查看是否配置成功

npm config get registry

3.安装electron

npm install -g electron

4.更新npm

npm install -g npm@8.19.2

5.安装cnpm

npm install -g cnpm

6.全局安装vue-Cli脚手架

npm install -g @vue/cli
# OR
yarn global add @vue/cli

7.检查

vue --version

8.全局升级

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

9.创建项目

安装vue脚手架后，可用命令 vue create 项目名  创建vue项目

二.更新

 1.使用nvmw

nvmw是一款针对windows的node版本管理工具 ，nvm是mac中的node版本管理工具。

安装nvmw

npm install -g nvmw

使用nvmw

nvmw –h 帮助

nvmw –v 版本

nvmw install v8.12.0 安装8.12.0版本的node,安装成功后提示

运行 nvmw use v8.12.0 切换到当前版本，至此成功升级node并切换到对应的版本。

或使用nvmw  switch v14.5.0 彻底更换默认的版本

// 安装
nvmw install <version>

// 切换版本
nvmw use <version>
// 直接修改默认的版本
nvmw  switch v14.5.0

3.启动项目提示如下错误

Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

 使用

npm install --legacy-peer-deps

三 打包 vue打包成exe  

第一步 拉去代码 并执行官方代码

git clone https://github.com/electron/electron-quick-start
npm install
npm run start

npm install若是出错 使用npm install —legacy–peer–deps 

第二步 修改自己项目的vue.config.js，路径必须修改为 ./，不是这个后续打包好的页面可能会出现白屏，加载不出来的情况

module.exports = {   
	publicPath: './',   
} 

第三步 打包自己的vue项目，将打包出来的 dist 文件夹复制到之前拉取的electron-quick–start文件夹中并和node_modules同级就行

npm run build

第四步 在electron-quick–start项目中，下载打包需要的依赖 electron-packager

npm install electron-packager --save-dev

第五步 进入electron-quick–start项目，删除项目根目录下的 index.html 文件
第六步 在electron-quick–start项目中找到入口文件 main.js ，修改打包的文件路径为我们的index.html（替换成我们的文件非常非常的重要，注意行数，一般都在16行多一点）

// main.js 原始内容 
mainWindow.loadFile('index.html') 
// 修改后的内容 
mainWindow.loadFile('./dist/index.html')*

第七步 在electron-quick–start项目中，进入 package.json ，在 scripts 中添加 packager 指令，如下所示：

"scripts": { 
"start": "electron .", 
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
} 

第八步 运行命令打包，然后项目中会出现一个 App-win32-x64 的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 App.exe 文件，App.exe就是这个项目的启动文件

npm run packager 

代码007普通

打赏 收藏 海报 链接