vue项目如何部署到服务器

第一步配置 vueconfigjs

第二步修改路由，改为 hash模式

第三步文件打包,执行以下，目录中会出现一个dist文件夹，将文件拖到服务器的 root 文件夹中

第四步可以通过域名进行访问 >

你现在的这个情况是通过vue打包后，build之后的产物。

先不多说，直接说方法，最后再解释。

想运行在tomcat上，先在打包之前做一下配置：

首先在config文件夹下找到indexjs修改一下当前路径

把assetsPublicPath：‘/’改成assetsPublicPath：‘/‘

对就是/前面加个点儿。

然后重新打包。就可以直接打开了。

======================================

为什么这样做呢，因为vue的打包默认形成的是一个部署在服务器环境上的文件，如果是部署在静态站点上（express或者阿帕奇），就需要做路径转变。其实算是个小tip。

欢迎追问。

熟悉vue项目的开发朋友应该了解，对于vue项目来说，上线其实就是执行npm run build 命令，然后将build出的dist文件夹上传到服务器上就可以了，对于现在的前后端分离项目来说，就是把dist放到nginx的html文件夹即可。
上传的过程既可以手动实现，也可以通过jenkins这类在线编译软件，总之，殊途同归。
除了上面两种还有一种现在比较火的部署方式，就是docker部署，当然正如上面说的，docker也是要实现上面的 *** 作，只不过有些差异而已。
针对docker部署需要了解的是，一般我们只需要拉取nginx镜像，把dist文件夹写入镜像即可，不需要去镜像里面执行拉取代码、执行编译、打包等 *** 作。这些 *** 作一般在写入镜像执行。
这样做的目的跟docker的理念是一致的，功能解耦，方便维护，而且对于一些大公司来说，可能还需要将编译后的代码进行扫描等 *** 作，如果在docker镜像内编译的话如果出现错误是不好定位问题的。
那么如何实现docker部署vue项目呢， *** 作如下参考：
文件目录如下：
在vueProject 根目录下新建Dockerfile文件，注意没有后缀，nginx镜像默认服务器的目录在/usr/share/nginx/html，内容如下：
build项目：
Build完成后会生成dist目录
然后在vueProject根目录下打开命令行执行如下命令生成镜像：
注意最后是一个点，代表在当前目录执行Dockerfile
如果没报错说明执行成功，此时可以在docker镜像列表看到该镜像。
启动镜像：
—name vp 代表自定义启动的镜像名称
-dp 是-d,-p的简写
8088:80 代表在宿主机的8088端口映射镜像的80端口，因为nginx默认的服务器端口就是80
最后就是之前生成的镜像名称。
大功告成。

更多详情：javascript技术分享

数据双向绑定，组件化，单文件组件

全局api： vueextend 、 vueset
实例选项: new Vue() 、 el 、 data 、 compents 都是vue实例选项
实例属性和方法： vm$on 、 vm$data 、 vm$destroy() 在$都是vue的实例和方法
指令： directive
内置组件： <components></compontents> 、 <keep-alive></keep-alive> 、 <router-view></router-view>

数组中不可用的方法：slice，concat；
直接修改数组list[i] = 值，不可以这样直接修改；
Vueset(数组，索引，{值}) vue的全局方法set来更改数组的某一项的值

标签属性和条件渲染
标签属性： v-bind：href='link"; 等效于 :href="link" 动态绑定；
条件渲染： v-if 、 v-else 、 v-show ；
数据绑定： {{}} 、 v-html (原始-HTML)、 v-text ；

事件绑定-内置事件绑定，自定义事件绑定
v-on:click="run" 等效于 @:click="run" 事件绑定；
自定义事件绑定： 父组件自定义事件
<my-compented @my-event='toggle'></my-compented>
子组件触发 my-event 自定义事件； this$emit('my-event', opation)；
父组件执行toggle 函数；

计算属性和数据监听
computed选项 -计算属性：根据我们调用属性来跟新，调用的属性没有变更，我们computed选项里面的方法读取的是缓存；

页面内容响应数据v-once
如果你需要页面内容响应数据的变化，就不加v-once。
如果你需要页面内容渲染后，不随数据的变化而变化，就加上这个。
对于一些固定不变的组件，在调用时我们可以加上v-once，只在第一次渲染执行，保存数据在内存中，后面再调用直接从内容中提取，提高执行效率。

应用

组件的通信
<p:is = "动态的组件名"></p> 等同于 <动态的组件名></动态的组件名> 动态绑定组件
注：Vue有个单项数据流的概念：即父组件传递给子组件的参数，子组件不能直接修改；防止引用类型参数被修改后，如果父组件中其他地方也使用了此参数会受到影响。

子组件 props 接受的两种形式：
数组： ['first-name','two-name'] ，从父组件传递两个属性值；
动态展现： {{firstName}}
对象：

slot：插槽
父组件插件里面定义的内容放到子组件 slot 中：

子组件

vue高级功能--过渡和动画

自定义指令：

使用 vue-cli的优势：
成熟的vue项目架构设计；
本地测试服务器；
集成打包上线方案 webpack

npm install vue-cli -g ：全局安装vue-cli
vue init webpack my-project ：初始化项目
npm install 安装项目依赖

npm run dev ：在localhost启动测试服务器；
npm run bulid ：生成上线目录（部署）

a、安装 vue-router

b、配置路由

6、关闭eslint
dev模式下，默认会做eslint检测，若要关闭，打开 config/indexjs ，设置 useEslint: false ，${}占位符，多行字符串

7、生命周期

8、支持es6
es6中很多新特性很好用class、promise、then、catch、（数组转换符号）、函数设置参数默认值等
a、安装babel-polyfill

b、在入口mainjs文件当中引入:

c、找到build文件夹下的webpackbaseconfjs

文章参考： 慕课网-欧米雪儿lyy

---