vue项目打包（用electron将Vue项目打包为window和Mac桌面应用 （electron

2.修改package.json文件，自定义打包命令 

3.修改config文件，添加对应环境的xxx.env.js文件test.env.js文件

prod.env.js

dev.env.js

4.修改打包配置 打开build/webpack.prod.conf.js文件

    修改     build/build.js

写入api文件api/index.js文件

执行npm run build--test 、npm run build--prod 打包不同环境

vue项目打包能优化10秒。根据相关公开信息查询知vue项目打包优化升级，打包时间优化10秒。Vue是单页面应用，有很多的路由引入，使用webpcak打包后的文件很大，进入首页时，加载的资源过多，页面会出现白屏的情况。

1.vue项目打包---npm run build

2.在HBuilder中新建5+app项目

3.把5+app项目中删除js css等文件 只剩manifest.json 文件 4.复制vue项目打包后的dist目录中所有文件到5+app项目 5.HBuilder中发布--》app云打包

注意点 ： 1、如页面数据不刷新 到manifest.json 文件--》基础配置---》 应用入口地址 改为线上地址即可4、如需更改app图标app名字 app启动界面设置都可在 manifest.json 文件中设置

vue项目打包

终端运行命令 npm run build

打包成功的标志与项目的改变，如下图：

点击index.html，通过浏览器运行，出现以下报错，如图：

那么应该如何修改呢？

具体步骤如下：

1、查看package.js文件的scripts命令

2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件

3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: ’/’,然后修改为assetsPublicPath: ’./’,即“/”前加点。

4、终端运行 npm run build 即可。

此时点击index.html，通过浏览器运行便，会发现动态绑定的static的图片找不到，故static必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。

在开发过程中经常遇到这样的情况，开发或者打包需要去请求后台的不同环境（测试环境，预上线环境，正式环境），虽然可以去改动手动的去改变axios的请求前缀，但是难免会出现忘记更改过来的情况，造成一下不必要的时间浪费，因此，这边文章主要教大家如何配置利用命令行进行不同环境的切换运行。 1.更改package.json文件，提供运行的命令

2.在根目录下新建.env.local以及.env.dpl等文件

3.在根目录下新建.htaccess文件，（如果你的路由是history模式）重写url，不然会出现404，页面找不到

4.在根目录下新建deploy.yaml文件

1.第一步

然后会生成一个dist目录的文件夹 2.将dist文件夹拎出来，我本地已经打好localhost服务器，使用IIs搭建的，如果想输入： localhost:8001/project 打开文件，需要在index.js文件配置：

如何让vue项目然后通过ip地址访问，需要在package.json配置项加个 --host 0.0.0.0

3.

build/webpack.prod.conf.js

config/index.js

4.重复第一步npm run build 因为这边我是本地搭建的服务器，菜菜的我不会写接口，只能模拟了，我这边是在服务器指定文件夹下建了个api文件夹，里面放对应的json文件，如果是团队开发，只要把dist文件扔给后端，后端会写好接口的，嗯就这样 5.运行结果对比

6.进一步优化 当项目日趋庞大，打包后的app.js会越大，-----异步组件加载

vue项目打包之后不通过nginx配置转发代理是：1、Vue项目打包在终端中执行npmrunbuild1打包完成在项目的dist目录看到index.html。目录的所有文件放到nginx服务器访问。2、下载得到一个zip的压缩包，解压用。3、在html文件夹中新建一个hhdglm文件，打包的东西放进去。

之前用Vue做了一个登录系统的项目，使用npm run build命令进行打包，经过vue-cli3.0版本的优化，打包后的dist文件夹体积非常小，我的才200K左右，可以看出Vue打包的优化十分不错，但是直接打开index.html是无法看到内容的，因为无法加载其中的内容，所以必须使用服务器来打开网页，我笔记本上装了express，所以就使用express来查看这个项目，介于有的朋友刚学Vue对于build打包后如何查看网页这点有疑问，我就给出解决办法：

1.全局安装express-generator生成器。

express-generator是express新版本分离出来的命令工具，想要使用express命令必须装这个依赖。

npm install express-generator -g // 也可使用cnpm比较快

2.创建一个express项目。

express expressName // expressName是项目名

3.进入项目目录，安装相关项目依赖。

cd expressName

npm install // 或cnpm install

4.将Vue build后生成的dist文件夹下的所有文件复制到express项目的publick文件夹下面，然后运行  npm start 来启动express项目。

5.打开浏览器，输入localhost:3000就可以看到效果了。

备注：这个3000是你自己设置的端口号，如果你设置888，那么你就要输入localhost:888。但打包完后有时候点击index.html，通过浏览器运行，出现以下报错，如图：1、查看package.js文件的scripts命令

2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件

3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: ’/’,然后修改为assetsPublicPath: ’./’,即“/”前加点。

4、终端运行 npm run build 即可。

此时点击index.html，通过浏览器运行便，会发现动态绑定的static的图片找不到，故static必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。

还有什么问题大家可以留言，我能帮忙解决的会第一时间回复。

新建一个项目，在根目录创建两个文件夹 packages 和 examples

将原项目中 components 下所有组件复制到新项目的 packages 目录下，如果有字体图标，将字体图标也一并放到 packages 目录下

packages/index.js

ma一般而言， examples 是包含测试的文件， packages 是源码， public 是一些静态文件，这些对库的使用者来说意义不大，可以不上传到npm

如果使用了第三方npm源，必须改回npm官方源

切换回官方源命令为 nrm use npm

登录

发布

取消发布

发布时遇到错误时可能是以下原因导致的:

安装

全局导入

使用组件