关闭

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录

标签: vuenodejshttpserverwebpackaxios
9182人阅读 评论(26) 收藏 举报
分类:

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录

前情回顾

通过上一章《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来》的学习,我们其实已经完成了我们设想的项目的开发。但是,我们做好的这套东西,是基于 nodejs 开发的。而我们最终希望,我们开发的项目,生成好一堆文件,然后随便通过任何一个 http 服务就能跑起来,也就是,还原成我们熟悉的 html+css+js 的模式。

好,这章,我们来讲解这部分内容。

打包项目

我们进入到终端,并且进入到我们的开发目录:

cd ~/Site/MyWork/vue-demo-cnodejs

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

npm run build

运行结果如下:

npm run build

好,我们已经打包好了。文件打包位置于项目目录里面的 dist 文件夹内。

但是,我们从上图可以看到,我们生成了一些 .map 的文件。这就有点恶心了。当我们的项目变得比较大的时候,这些文件,第一个是,非常大,第二个,编译时间非常长。所以,我们要把这个文件给去掉。

去掉 map 文件

我们编辑 /config/index.js 文件,找到其中的

productionSourceMap: true,

修改为:

productionSourceMap: false,

然后我们重新运行打包命令:

npm run build

好,我们看下运行结果:

npm run build

没用的 map 文件已经没有了。

好,我们可以从上图中看出,有一个 tip 。它告诉我们,打包出来的文件,必须在 http 服务中运行,否则,不会工作。

安装 http-server 启动 http 服务

我们进入 dist 文件夹,然后启动一个 http 服务,来看看可以不可以访问。

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

npm install http-server -g

npm install http-server -g

这里用 cnpm 替代了 npm

好,通过这个命令,我们就安装好了。安装好了之后正常我们就能够使用 http-server 命令来跑服务了。但是,这个世界不正常的时候是很多的嘛!

在终端里面输入,

http-server

看能否正常启动,还是爆 -bash: http-server: command not found 错误,这里,是说没有找到这个命令,没有关系,这是表示,我们的 nodejs 的程序执行路径,没有添加到环境变量中去。

首先,如上图所示,我们的 http-server 安装到了 /usr/local/Cellar/node/7.6.0/bin/ 这个目录下面,我们只要把这个目录,添加到环境变量即可。

请注意,你的安装路径可能和我的是不一致的,请注意调整。

我们在终端内执行下面两个命令,就可以了。

echo 'export PATH="$PATH:/usr/local/Cellar/node/7.6.0/bin/"' >> ~/.bash_profile 
. ~/.bash_profile

第一条命令是追加环境变量,第二个命令是,使我们的追加立即生效。

当然,你也可以直接编辑 ~/.bash_profile 文件,把上面命令中的单引号里面的内容插入到文件最后面,然后执行第二个命令生效。随便。

好,一个插曲结束。

忘记了我们要干嘛了吗?我们要把我们打包出来的东西跑起来呀!

cd dist
http-server -p 3000

如果你是严格按照我的教程来的,那么现在已经可以顺利的跑起来了。我们在浏览器中输入 http://127.0.0.1:3000 就应该可以访问了。

当然,会报错,说是接口找不到,404错误。因为我们把接口给通过代理的方式开启到了本地,但是这里我们并没有开启代理,所以就跑不起来了。很正常的。

这是因为示例的接口的问题。实际开发你还要按照我的这个做。只不过,最终代码放到真实的服务器环境去和后端接口在一个 http 服务下面的话,就不存在这个问题了。

好,我们就跑起来了。

将项目打包到子目录

刚刚,我们是将文件,打包为根目录访问的。也就是说,必须在 dist 文件夹下面启动一个服务,才能把项目跑起来。

但是我们开发的大多数项目,可能是必须跑在二级目录,甚至更深层次的目录的。怎么做呢?

我们编辑 config/index.js 文件,找到:

assetsPublicPath: '/',

'/' 修改为你要放的子目录的路径就行了。这里,我要放到 /dist/ 目录下面。于是,我就把这里修改为

assetsPublicPath: '/dist/',

然后,重新运行

npm run build

进行打包。

很快,就打包好了。

还记得,我们在项目文件夹中用 npm run dev 就可以开启一个 http 服务吗?并且那里,我们还代理了接口的。

好,我们就这么做。

然后我们访问二级目录 /dist/ 我们就可以看到效果了。

npm run dev dist

注意,我访问的不是根目录,而是 /dist/ 这个子目录哦,这里是访问的我们打包的文件的。

├── index.html
└── static
    ├── css
    │   └── app.d41d8cd98f00b204e9800998ecf8427e.css
    └── js
        ├── app.8ffccad49e36e43a4e9b.js
        ├── manifest.7a471601ff5a8b26ee49.js
        └── vendor.057dd4249604e1e9c3b5.js

好,到这里,我们的打包工作,就讲完了。

实际开发中,你只需要把 dist 文件夹中打包好的文件,给运维他们,让他们去部署到真实的服务器环境就好了。

关于项目打包时,图片等资源的处理,请查看我的博文 http://blog.csdn.net/fungleo/article/details/77799057

我知道我讲的有点绕了。但不知道如何组织语言,我相信你自己看两遍,应该能够理解的。

如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。

本文由 FungLeo 原创,允许转载,但转载必须保留首发链接。

15
0
查看评论

Vue2+VueRouter2+webpack 构建项目实战(一)准备工作

Vue2+VueRouter2+webpack 构建项目实战(一)准备工作之前写的博客没有采用打包工具,而是直接引用js的方式来做的。这种方式很扯淡,也因此,我写了三篇博客之后就没有再写了。通过几个月的学习和实战,基本厘清了Vue1 + VueRouter1 + browserify的一些技术点。并...
  • FungLeo
  • FungLeo
  • 2016-11-15 14:43
  • 44449

Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构

Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构通过上一篇博文《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》,我们已经新建好了一个基于vue+webpack的项目。本篇博文将详细的厘清一下这个项目的结构,然后我们要从哪里开始等。项目目...
  • FungLeo
  • FungLeo
  • 2016-11-15 15:17
  • 38239

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(二)

通过上一篇文章vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(一),我们已经新建好了一个基于vue+webpack的项目。本篇文章将详细的帮助大家对这个项目的结构进行搭建,然后我们要从这里慢慢进入实战。 提示:希望大家还是多去官网看看教程,踩踩坑,你会有些疑问,我呢则会...
  • nongshuqiner
  • nongshuqiner
  • 2017-02-28 12:18
  • 2258

Vue2 + iVIew 后台管理系统解决方案

和element说再见! https://github.com/vanishcode/iview2-management-system
  • SFtec
  • SFtec
  • 2017-03-15 21:40
  • 12382

Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由

Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由前情回顾《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》《Vue2+VueRouter2+webpack 构...
  • FungLeo
  • FungLeo
  • 2016-11-18 10:14
  • 21245

vue2+element 管理后台 集成解决方案 没有没做的,只要想不到的

线上地址 前言 这半年来一直在用vue写管理后台,目前后台已经有七十多个页面,十几种权限,但维护成本依然很低,效率依然很高,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios.由于是个人项目,所以数据请求都是用了mockjs代替。 ...
  • zgrkaka
  • zgrkaka
  • 2017-04-25 17:20
  • 13238

vue2使用ueditor

最近用vue2做项目,需要用到富文本编辑器,开始用的vue2-editor这个是基于Quill,看上去听漂亮的,但是有几点无法满足需求 图片是用base64保存的,无法上传图片 对文字的编辑能力较弱,如法指定选择文字修改标题,只能整行修改。 于是决定用ueditor。但是网上找了好多vue2使用u...
  • shooke
  • shooke
  • 2017-06-17 22:18
  • 3595

Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表

Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表前情回顾《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》《Vue2+VueRouter2+we...
  • FungLeo
  • FungLeo
  • 2016-11-17 16:41
  • 19435

Vue2集成AdminLte 后台模板

# Vue2集成AdminLte 后台模板前提条件 安装最新版的nodejs 创建vue工程 npm install --global vue-cli vue init webpack vue-adminlte cd vue-adminlte npm install npm run dev 此时可...
  • DaJiangU
  • DaJiangU
  • 2017-11-10 16:00
  • 729

基于Vue2的移动端开发环境搭建详解

前言 vue2.0发布了,那么还在用vue1.x的你,是不是也有所心动呢?下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤,下面来一起看看吧。 一、vue-cli 首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命...
  • abcde158308
  • abcde158308
  • 2017-03-12 23:05
  • 4400
    个人资料
    • 访问:1213530次
    • 积分:12725
    • 等级:
    • 排名:第1301名
    • 原创:214篇
    • 转载:39篇
    • 译文:1篇
    • 评论:924条
    站内搜索
    博客专栏
    文章分类
    友情链接
    最新评论