为什么vue+webpack需要用到node,如何部署项目到服务器?
第一部分
之前一直不太理解为什么要使用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上就可以了
<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,如何部署项目到服务器?的更多相关文章
- Vue + webpack 项目实践
Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...
- nodejs, vue, webpack 项目实践
vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuej ...
- windows环境下搭建vue+webpack的开发环境
前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...
- Vue+Webpack+Grunt集成
说明 Vue.Grunt.Webpack的知识请看官方网站 Grunt Tasks:构建.开发调试.打包,命令:grunt build,grunt default,grunt zipall... We ...
- Vue+Webpack构建移动端京东金融(一、开发前准备)
一.开发前准备 1.node环境搭建 去node.js官网下载长期支持版本的node,采用全局安装,安装方式自行百度 网址:https://nodejs.org/zh-cn/ 安装后在cmd命令行运行 ...
- Vue+Webpack构建去哪儿APP_一.开发前准备
一.开发前准备 1.node环境搭建 去node.js官网下载长期支持版本的node,采用全局安装,安装方式自行百度 网址:https://nodejs.org/zh-cn/ 安装后在cmd命令行运行 ...
- 从0开始搭建vue+webpack脚手架(二)
接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...
- 一字一句的搞懂vue-cli之vue webpack template配置
webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...
- 从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(一)
摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...
随机推荐
- LSI阵列卡进行高效管理
LSI公司(LSI Corporation)(NASDAQ:LSI)(中文:艾萨华)是一家总部位于加利福尼亚州米尔皮塔斯 (Milpitas) 的半导体和软件领先供应商,其主要产品包括:RAID控制器 ...
- c#创建Table
private void BindDatazhangting() { DataTable dt = new DataTable(); dt.Columns.Add("channel" ...
- 循环队列(Joseplus Problem)
#include <iostream> #include <stdio.h> using namespace std; ]; ; void Enqueue(int x) { ) ...
- doges
dogse入门指南 Dogse作为游戏服务端引擎,目前只包含游戏服务端的核心部分,但这也是最核心的部分.它全部使用.net c#开发,充分兼顾了程序性能与代码编写的准确性与易用性,再加上以vs作为开发 ...
- [SinGuLaRiTy] 高一下半期测试
[SinGuLaRiTy-1017] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 对于所有的题目: Time Limit: 1s | Me ...
- 【bzoj3172】: [Tjoi2013]单词 字符串-AC自动机
[bzoj3172]: [Tjoi2013]单词 先用所有单词构造一个AC自动机 题目要求的是每个单词在这个AC自动机里匹配到的次数 每次insert一个单词的时候把路径上的cnt++ 那么点p-&g ...
- luogu2513 逆序对数列
我们令\(f[i][j]\)表示\(i\)的全排列中,逆序数为\(j\)的个数. 我们考虑在\(i-1\)的排列中插入\(i\).\(k\)是这次更新会导致增加多少逆序数. 则\(\begin{ali ...
- springmvc htmlEscape标签的作用
有些东西自己不知道就想要弄明白 唉 做项目 看人家项目中用到啦 不会 不知道 就百度啦 整理了一下 方便自己记忆 一.SpringMVC 表单元素标签 如下: <form:textarea ...
- Codeforces Round #482 (Div. 2) B、Treasure Hunt(模拟+贪心)979B
题目 大致题意 n表示要进行n次操作,接着给出三个字符串,表示三个人初始拥有的串.每次操作要替换字符串中的字母,询问最后在游戏中曾出现过的相同的子串谁最多. 思路 (1) 讨论最多的子串,肯定是全部 ...
- 磁盘 IO 和网络 IO 该如何评估、监控、性能定位和优化?
生产中经常遇到一些IO延时长导致的系统吞吐量下降.响应时间慢等问题,例如交换机故障.网线老化导致的丢包重传:存储阵列条带宽度不足.缓存不足.QoS限制.RAID级别设置不当等引起的IO延时. 一.评估 ...