Vue项目build打包后如何运行
之前用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必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。
还有什么问题大家可以留言，我能帮忙解决的会第一时间回复。
如何打包Vue项目
Vue项目编写完成后，一般需要打包压缩成新的文件，下面简单介绍一下是如何对Vue项目打包的。
工具/稿腔原料npm方法/步骤1npmrunbuild
2build进行中，一般这个过程需氏敬罩要一点点时间
3打包完成，可以看到有提示歼闹buildcomplete
4build完成时候可以在相中发现多了一个dist文件夹，里面包括一个css文件，js文件和index.html
5项目最终上线的内容是打包压缩的，也就是上面的dist文件，整个过程还是很简单的。
6需要注意一下，即使项目中仅仅修改了一丁点东西，都需要重新进行打包，执行上诉的操作。
vue项目打包步骤
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必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。
小记vue项目打包优化
开发vue的项目也有两三年了，从小白前端到小白前端，深感学无止境、学海无涯、活到老学到老呀
经常被听到：我们的网站好慢呀
因为最近的项目都放在国外，还以为是这个原因，再加上需求一堆一堆的来，也没时间去想优化的事儿。现在终于是闲了，借鉴各路大神的方法，这里做个小总结，以备下次忘记了，哈哈
优化方向：
其实就是一个目标，减少打包后的体积，减少首次加载的时间。
2.按需引入
项目中我用了 element-ui, 首页加和拍载时， element-ui要在app.js之前加载，它的体积也不小，首页引入多少有点占资源，所以这里想尽可能只引入首屏需要的组件，其它组件按需加载就好。
element-ui官方有按需加载配置的例子，但由于在 vue.config.js中配置了三方包打成一个包，所以按需加载好像失效了，而我也不想每个页面都引用一下组件，所以就想了另外的方法
项目中我主要是针对首屏加拿含载做了优化，我觉得只要首屏快速出来了，其它的就慢慢来吧，哈哈
还有其它的一些方向，路由懒加载，外部引入资源，这些唤敏羡都很容易了，就不罗列了
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
