Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录
2017-08-26 19:11
471 查看
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录
前情回顾
通过上一章《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来》的学习,我们其实已经完成了我们设想的项目的开发。但是,我们做好的这套东西,是基于nodejs开发的。而我们最终希望,我们开发的项目,生成好一堆文件,然后随便通过任何一个
http服务就能跑起来,也就是,还原成我们熟悉的
html+css+js的模式。
好,这章,我们来讲解这部分内容。
打包项目
我们进入到终端,并且进入到我们的开发目录:cd ~/Site/MyWork/vue-demo-cnodejs
然后运行如下代码,进行打包:
npm run build
运行结果如下:
好,我们已经打包好了。文件打包位置于项目目录里面的
dist文件夹内。
但是,我们从上图可以看到,我们生成了一些
.map的文件。这就有点恶心了。当我们的项目变得比较大的时候,这些文件,第一个是,非常大,第二个,编译时间非常长。所以,我们要把这个文件给去掉。
去掉 map 文件
我们编辑/config/index.js文件,找到其中的
productionSourceMap: true,
修改为:
productionSourceMap: false,
然后我们重新运行打包命令:
npm run build
好,我们看下运行结果:
没用的
map文件已经没有了。
好,我们可以从上图中看出,有一个
tip。它告诉我们,打包出来的文件,必须在
http服务中运行,否则,不会工作。
安装 http-server 启动 http 服务
我们进入dist文件夹,然后启动一个
http服务,来看看可以不可以访问。
你可能不知道如何启动这样一个
http服务,或者,你现在已经到
apache里面去进行配置去了。不用那么麻烦,我们有
nodejs环境,只要全局安装一个
http-server服务就好了呀。
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/我们就可以看到效果了。
注意,我访问的不是根目录,而是
/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 原创,允许转载,但转载必须保留首发链接。
相关文章推荐
- Vue2+VueRouter2+Webpack+Axios 构建项目实战(十)打包项目并发布到子目录
- vue项目 构建 打包 发布 三部曲
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十二)打包项目图片等资源的处理
- maven用于项目构建和管理。包含创建Project、编译、测试、打包、发布
- vue项目 构建 打包 发布 三部曲
- 项目编码, 开发, 构建, 打包,发布, 部署
- Jenkins+Git+PHP生成构建PHP项目的changelog以用于生成增量或减量打包发布
- 详解vue项目的构建,打包,发布全过程
- ant笔记-7.项目构建之运行测试、生成文档、项目打包、发布ftp
- vue项目构建-打包-发布--简易demo
- 项目打包发布教程
- Intellij idea 17 打包发布maven项目 全记录
- 怎么发布一个pom项目且打包maven源码,将源码包与jar包一同deploy到mavenserver
- Jenkins+github+maven自动构建发布SpringBoot项目
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
- 【Android Studio探索之路系列】之十:Gradle项目构建系统(四):Android Studio项目多渠道打包
- Ant自动编译打包&发布 android项目
- 快速构建Windows 8风格应用3-打包发布应用
- IDEA+Maven+Embedded Jetty+Jersey构建Restful服务并打包成jar包发布
- 发布到AppStore时把项目打包成ipa