十二、VueJs 填坑日记之项目打包发布

通过上一篇博文的学习,我们其实已经完成了我们设想的项目的开发。但是,我们做好的这套东西,是基于 nodejs 开发的。而我们最终希望,我们开发的项目,生成好一堆文件,然后随便通过任何一个 http 服务就能跑起来,也就是,还原成我们熟悉的 html+css+js 的模式。这章,我们来讲解这部分内容。另外我的博客即将同步至腾讯云+社区,邀请大家一同入驻。

打包项目 进入到我们的项目根目录

d:
cd vueworks/my-vue

然后运行如下代码,进行打包:

npm run build

结果如下:

现在我们已经把项目打包好,打完好的项目默认位置在/dist文件夹里。

我们从打包时的cmd的日志来看,里面有很多的map文件的生成,由于截图有限,上面只是截取了结尾,大家可以向上滚动一下,就可以看到,如果项目比较大的时候,这些文件一个是比较大,另一个就是编译比较慢。所以我们把这些map文件去掉。

去掉 map 文件 打开 /config/index.js 文件,找到其中的productionSourceMap: true,大根在build下。默认是true,修改为false:

productionSourceMap: false,

然后重新打包

npm run build

大家可以看日志,这次map文件已经没有了,到这里我们就完成了项目的打包。上面有个Tip,提示我们打包完的项目,必须要在http server下才能运行。

安装http server 我们进入 dist 文件夹,然后启动一个 http 服务,来看看可以不可以访问。你可能不知道如何启动这样一个 http 服务,或者,你现在已经到 apache 里面去进行配置去了。不用那么麻烦,我们有 nodejs 环境,只要全局安装一个 http-server 服务就好了呀。

npm install http-server -g

在安装的过程,大家可以用cnpm来代替npm。在windows上安装完,直接就可以运行了。切换到dist目录,运行

http-server -p 3000

如果你是严格按照我的教程来的,那么现在已经可以顺利的跑起来了。我们在浏览器中输入 http://127.0.0.1:3000 就应该可以访问了。当然,会报错,说是接口找不到,404错误。因为我们把接口给通过代理的方式开启到了本地,但是这里我们并没有开启代理,所以就跑不起来了。很正常的。这是因为示例的接口的问题。实际开发你还要按照我的这个做。只不过,最终代码放到真实的服务器环境去和后端接口在一个 http服务下面的话,就不存在这个问题了。

将项目打包到子目录 刚刚,我们是将文件,打包为根目录访问的。也就是说,必须在 dist 文件夹下面启动一个服务,才能把项目跑起来。 但是我们开发的大多数项目,可能是必须跑在二级目录,甚至更深层次的目录的。怎么做呢? 我们编辑 config/index.js 文件,找到assetsPublicPath: '/',把/修改为我们的子目录的路径就行了,这里我要放到wemz,于是,我修改为如下代码:

assetsPublicPath: '/wemz/',

然后,重新运行

npm run build

还记得,我们在项目文件夹中用 npm run dev 就可以开启一个 http 服务吗?并且那里,我们还代理了接口的。我们就这么做。然后我们访问二级目录 /dist/ 我们就可以看到效果了。

注意,我访问的不是根目录,而是 /wemz/ 这个子目录哦,这里是访问的我们打包的文件的。虽然实际生成的文件还是在dist目录里,但是wemz这个目录就可以访问了。将来也可以直接将dist目录下的所有文件复制到所有服务器上的/wemz的目录里。

最后附上代码的git:https://gitee.com/isoftforce/vue-sample.git

忠心感谢FungLeo,是你们无私的奉献,才让我们有了学习的参考,以下是地址: http://blog.csdn.net/FungLeo/article/details/77606216

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏信安之路

Linux渗透测试

最近发现了一个不错的靶场,里面各种渗透测试的虚拟机,大家可以下载进行尝试学习。还有就是一个漏洞利用存档,可以找到很多我们可以利用的学习的东西。

3780
来自专栏腾讯云TStack专栏

nova backup 剖析

nova backup 可以指定虚拟机备份类型,备份保留的数目,那 nova backup 到底是怎么做到备份虚拟机的?下面为大家拨开层层迷雾。

3150
来自专栏小二的折腾日记

服务器-Nginx基础配置

Nginx的默认配置文件为:nginx.conf,文件一共由三个部分组成,分别为:全局块、events块、http块在http块中,包含http全局块,多个se...

1814
来自专栏IT技术精选文摘

Java I/O底层是如何工作的?

本博文主要讨论I/O在底层是如何工作的。本文服务的读者,迫切希望了解Java I/O操作是在机器层面如何进行映射,以及应用运行时硬件都做了什么。 假定你熟悉基...

3078
来自专栏小狼的世界

利用Apache ab以及GNUPlot来进行Web测试

最近写了几个测试脚本,希望要观察使用PUT方式上传文件和使用POST方式上传文件,两者效率的差别。

1032
来自专栏FreeBuf

爬虫代理搭建与批量安装

代理对于搞爬虫的都不会陌生。公司有一批阿里云服务器用于分布式增量抓取,但对于一些封ip且只需进行一次全量抓取的数据源,或数据量级较小时,如果部署到爬虫集群上又太...

5335
来自专栏施炯的IoT开发专栏

Windows 10 IoT Serials 6 - 如何修改IoTStartupOnBoot.cmd文件

    使用Windows 10 IoT Core系统的朋友应该会比较熟悉IoTStartupOnBoot.cmd文件,该文件是系统启动以后加载的批处理文件,一...

2598
来自专栏Java后端技术栈

从Nginx、Apache工作原理看为什么Nginx比Apache高效!

Nginx才短短几年,就拿下了Web服务器大壁江山,众所周知,Nginx在处理大并发静态请求方面,效率明显高于Httpd,甚至能轻松解决C10K问题。

1451
来自专栏武培轩的专栏

当你在浏览器地址栏输入一个URL后回车,将会发生的事情?

当我们在浏览器的地址栏输入 www.cnblogs.com ,然后回车,回车到看到页面到底发生了什么呢? 域名解析 --> 发起TCP的3次握手 --> 建立T...

3757
来自专栏LIN_ZONE

Linux各目录及每个目录的详细介绍(转载)

Linux目录和Windows目录有着很大的不同,Linux目录类似一个树,最顶层是其根目录,如下图:

1372

扫码关注云+社区

领取腾讯云代金券