第一部分 

 之前一直不太理解为什么要使用vue+webapck,还有在使用了vue-cli之后会用到后台,即vue-cli自动帮我们安装了express服务器,在本地服务器上运行,因为我们希望可以模拟在真是服务器上的效果,然而又不可能始终在真实的服务器上运行,所以在本地服务器上运行就很重要了。

  但是通过vue+webpack构建的项目如何部署到服务器上呢?

  首先VUE 是一个javascript的前端框架,注定了它是运行在浏览器里的,对服务器本地没有任何要求,只要一个静态文件服务器能通过http访问到其资源文件就足矣!无论你是用apache ,ngnix 就算你要用node 自己实现一个静态文件服务器,也用不了多少行代码。

  npm run dev 是用来在本地开发的时候做调试用的,vue开发的是前端的东西,不是nodejs 服务端程序,按道理讲,生产环境里就不该存在npm,甚至nodejs也不需要(用nodejs来做web静态服务的除外),正确的做法很简单,通过npm run build 把生成的dist文件夹(不要上传文件夹)里的内容上传到http服务器上就可以通过 http来访问了,开发机上正常,上传以后 程序出现错误不能运行的原因99.99%的可能性是你引用资源的路径有问题

  一般如果vue框架的程序上传到网站服务器的根目录下是不 会有问题的,也不存在资源文件引用错误的情况,但如果你不是根目录,就会有问题,通过vue-cli 生成的开发目录,build以后默认引用资源文件的路径是:

比如 app.js的引用方式<script type="text/javascript" src="/static/js/app.js"></script>

  所以,如果你的目录结构是 如下:

www/
+hot/
+static/
+index.html

  当你通过http://www.xxx.com/hot/index.html来访问的时候 会出现找不到app.js。

  因为index.html里引用的app.js路径是:

http://www.xxx.com/static/js/app.js

  但是app.js的实际路径是:

http://www.xxx.com/hot/static/js/app.js 所以出现了404

  要解决的方法很简单把引用方式 改成如下两种方式 都可以:

<script type="text/javascript" src="./static/js/app.js"></script>
或者
<script type="text/javascript" src="/hot/static/js/app.js"></script>
推荐这样的方式,可以保正在vue-router生成的url下也不出现问题

  都可以,当然这也不需要手动去改。

  

  或者在config中的index.js下修改webpack配置:

assetsPublicPath: './'
或者
assetsPublicPath: '/hot/',

  这样,我们就基本解决了有服务器子目下运行的问题,

  当然,如果你还用到了vue-router

  要在router的配置中加上

export default new Router({
mode: 'history',
base: '/hot/', //加上这一行

  用浏览器打开http://www.xxx.com/hot/

  一切运行正常,点击各种链接也能出来,但是由于我启用了history模式,我直接在浏览里访问 http://www.xxx.com/hot/item/1 这样的url是又404了,为什么 我可以在首页通过点击进入 http://www.xxx.com/hot/item/1 这个页面,但是直接访问又不行呢,

  因为在history 模式下,只是动态的通过js 操作window.history 来改变有浏览器地址栏里的路径,并没有发起http请求,但当你直接 在浏览器里输入这个地址的时候 就一定要先对服务器放起http请求,但是这个目标在服务器上又不存在所以就返回了404了,怎么解决呢,就是把所有的请求全部转发到http://www.xxx.com/hot/index.hmtl上就可以了  

  我用的是apache 做web服务器的虚拟空间,而且开启支.htaccess文件支持,我成我的文件里加上如下,就一切正常了,

<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On RewriteCond %{REQUEST_URI} ^/(hot|hot/.*)$
RewriteRule ^/hot/index\.html$ - [L,NC] RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(hot|hot/.*)$ hot/index.html [L]
</IfModule>

这个配置的作用就是把所有服务器上不存在请求全部转发到index.html上去,这样就可以直接通过各种url来访问了

主要内容均来自:https://www.zhihu.com/question/46630687

第二部分: 实际问题的解决

  这一部分即解决实际中遇到的问题。

  我将文件打包成了production之后放在下面的目录之下:

  这样,即放在了tomcat的webapps下的bbg下的wechat2中,而没有直接放在webapps的根目录下,这样在实际运行的过程中,就会发现报错,不能正常显示,因为index.html引用的路径都是/static/.... ,然而static 叜webapps的根目录下,所以就会报错。

  解决方法很简答,即在config下的index.js中修改静态资源的路径:、

build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/bbg/wechat2/',

  从最后两行,可以看到这样index.html最终引用的就是/bbg/wechat2/static了,成功执行。

  说明:之所以将静态文件放在这里运行,是因为我们在bbg同级的目录下放了一个war包。 war包实际上就是将一个zip文件的后缀直接修改为war,然后tomcat服务器在启动时,就会自动解压这个war包。解压后就和你直接整套的去部署是一样的,也就是通过war包可以方便实际的运行。

其实war文件就是Java中web应用程序的打包。借用一个老兄的话,“当你一个web应用程序很多的时候,如果你想把它部署到别的机器上,来回拷这些文件是件挺郁闷的事情,如果要是一个文件就好了。。。那么war文件就可以满足你这个小小的要求”。

那有人会说,这和直接打成rar文件不一样吗?区别大了!

如果你直接打成rar文件,你得手动的去解压缩,但是war文件不需要,你把它放到tomcat的webapp目录下,就可以直接运行了,我觉得这个功能够强大,哈哈。

在tomcat安装目录下的conf目录下有个server.xml,搜索“unpackWARs”关键字,你会看到在<Host>标签中会有对其的设置,如果设置成true,那么tomcat在启动的时候,会在webapps目录下自动解压你那个war文件;如果设置成false,则tomcat直接访问war文件。

      <Host name="localhost"  appBase="webapps"
unpackWARs="true" autoDeploy="true">

假如他的值是true,你的tomcat已经启动了,你把自动解压的文件夹删了,tomcat又会自动解压,我觉得它是实时的在检查,一旦没有,就会解压。你可以不用担心启动它和放war的顺序,或者启动服务器和存放文件的顺序。

为什么vue+webpack需要用到node,如何部署项目到服务器?的更多相关文章

  1. Vue + webpack 项目实践

    Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...

  2. nodejs, vue, webpack 项目实践

    vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuej ...

  3. windows环境下搭建vue+webpack的开发环境

    前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...

  4. Vue+Webpack+Grunt集成

    说明 Vue.Grunt.Webpack的知识请看官方网站 Grunt Tasks:构建.开发调试.打包,命令:grunt build,grunt default,grunt zipall... We ...

  5. Vue+Webpack构建移动端京东金融(一、开发前准备)

    一.开发前准备 1.node环境搭建 去node.js官网下载长期支持版本的node,采用全局安装,安装方式自行百度 网址:https://nodejs.org/zh-cn/ 安装后在cmd命令行运行 ...

  6. Vue+Webpack构建去哪儿APP_一.开发前准备

    一.开发前准备 1.node环境搭建 去node.js官网下载长期支持版本的node,采用全局安装,安装方式自行百度 网址:https://nodejs.org/zh-cn/ 安装后在cmd命令行运行 ...

  7. 从0开始搭建vue+webpack脚手架(二)

    接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...

  8. 一字一句的搞懂vue-cli之vue webpack template配置

    webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...

  9. 从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(一)

    摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...

随机推荐

  1. vs2010 怎样设置文本编辑窗口和解决方案资源管理器同步?

    即切换左边的文本编辑窗口,解决方案资源管理器如何定位到相应的文件项上?答案: 工具--选项--项目和解决方案--常规--在解决方案资源管理器中跟踪活动项(前打勾)确定 应该就可以了.

  2. docker,mysql,Navicat

    Navicat破解网址  https://www.jianshu.com/p/5f693b4c9468 docker pull mysql docker run -d -p 3306:3306 --n ...

  3. 博弈论-一堆nim博弈合在一起

    今天A了张子苏大神的的题,感觉神清气爽. 一篇对于多层nim博弈讲的很透彻的博文:http://acm.hdu.edu.cn/forum/read.php?fid=9&tid=10617 我来 ...

  4. 洛谷P4074 [WC2013]糖果公园(莫队)

    传送门 总算会树形莫队了…… 上次听说树形莫队是给树分块,实在看不懂.然后用括号序列的方法做总算能弄明白了 先说一下什么是括号序列,就是在$dfs$的时候,进入的时候记录一下,出去的时候也记录一下 拿 ...

  5. sap alv 单元格行列邓颜色设定(记录一下网址,供下次使用)

    https://www.cnblogs.com/mingdashu/p/color_alv.html

  6. charset=iso-8859-1

    今天群里有人在问, 求解:charset="ISO-8859-1"是什么意思 其实我也不大懂,然后就去翻阅了下资料.科普开始: 网页制作中遇到的编码,乱码问题之一:charset= ...

  7. PHP中SESSION无法获取问题

    近期在看公司老项目,前台可以正常访问,但是后台却无法登录,一直报请求超时,请重新登录!进入服务后发现是有一处SESSION的值无法获取,这就让人很郁闷了,通常SESSION无法使用都是因为没有使用se ...

  8. ZOJ-Little Sub and Pascal's Triangle(思维规律)

    Little Sub is about to take a math exam at school. As he is very confident, he believes there is no ...

  9. 前端CSS css引入方式 css选择器 css选择器优先级

    一.       CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...

  10. day31 管道 进程池 数据共享

    1.    管道(了解) #创建管道的类: Pipe([duplex]):在进程之间创建一条管道,并返回元组(conn1,conn2),其中conn1,conn2表示管道两端的连接对象,强调一点:必须 ...