工作也有一段时间了，平时忙于业务代码的编写中，发现身边的一些人以及自己，对一些基本概念理解有所偏差，可能闹出笑话，会问出下面这些常识性错误的奇怪问题：
- (我提交到服务器之后执行了 npm run dev之后关闭了是可以打开网页的，但是关闭了ssh之后，服务马上就不能用了，请问正确的部署方式是怎么样的？)
2333，怎么都是关于Vue的问题。。。我真没黑Vue开发者，不过也可以看出，Vue的小白受众的确比较多。
webpack和webpack-dev-server
现在基于Vue，React的SPA单页应用开发，都倾向于采用webpack的模块化构建方案。可能大多数人，开发一个项目，会使用脚手架工具（vue-cli, create-react-app） 我们本地开发时，运行命令行npm run dev，然后就开始编写业务逻辑了，对于其中发生了什么，大多数人可能不太关心。其实运行了该命令，就是运行了webpack-dev-server
webpack-dev-server是webpack官方提供的一个小型Express服务器，正是因为webpack-dev-server自己开启了一个服务器，我们才能够前后端分离开发(我们不需要关心后端的代码)。前端启动的这个服务器，是用来构建和渲染页面，并提供了自动刷新和热替换功能。
简单来说： webpack只是构建(npm run build)
webpack-dev-server除了构建，还提供web服务(npm run dev)
路由
什么是路由？ 简单来说：/about/deepred /home/ 这些就是路由
在web开发中，路由分为前端路由和后台路由 其实在单页应用还没有流行前，路由基本指的是后台路由。如果你熟悉传统的后台web开发，可能对下面的代码很熟悉：
app.get('/about', function (req, res) { res.render('about', { title: 'Hey', message: 'Hello there!'});});app.get('/', function (req, res) { res.render('index');});复制代码 传统的web网站，所有的路由都是由后台定义的。当我们想访问一个页面http://anata.me/about/，首先向后台发送一个请求，后台根据定义好的路由，决定渲染哪个页面。
然而单页应用的出现，改变了这个模式。如果你是前端开发，应该对这段代码更加熟悉：
routes: [ { path: '/user/:userId', name: 'user', component: User }, { path: '/about/', name: 'about', component: About } ]复制代码 前端路由是将页面的渲染权交给了js控制，不通过请求服务器来判断渲染页面。前端一般利用histroy和hash来控制，达到不刷新页面可以使显示内容发生变化，这样速度更快，用户体验更好。前端路由解放了服务端，专心提供接口数据服务。
打包部署
脚手架生成的项目，一般运行npm run build之后，会在项目根目录生成一个dist目录，这就是我们打包好后的静态资源文件。 注意的是：
- 我们线上运行的单页应用，就是打包好后的dist文件，并不是src目录下的源文件
- 线上部署更不是运行
npm run dev启动项目。npm run dev启动的服务器只是为了开发而使用的，真正线上的服务器，是由后台提供的（比如PHP，Java, python, Node...）
部署的方式有很多，比如可以把dist文件和后台代码放在一起，后台把dist文件当做静态资源读取即可。不过因为采用了前端路由的方案，后台还需要配置一下，以Express举例：
// 访问静态资源文件 这里是访问所有dist目录下的静态资源文件app.use(express.static(path.resolve(__dirname, '../dist')))// 因为是单页应用 所有请求都走/dist/index.html// 这一句要放在所有其他路由的后面app.get('*', function(req, res) { const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8') res.send(html)})复制代码 也可以把dist静态文件和后台代码分开，通过Nginx部署
server { listen 80; server_name 127.0.0.1; location / { root /data/deered/dist; #前端打包后的dist文件位置 try_files $uri $uri/ /index.html; #防止页面刷新404 index index.html; } }复制代码 跨域
因为webpack-dev-server启动了一个服务器，所以在开发时，前端去请求真正的后台接口，是存在跨域问题的。webpack提供了跨域的解决方案，原理就是让服务器反向代理请求真正的接口
vue-cli配置跨域
proxyTable: { '/api': { target: 'http://localhost:8089/api/', changeOrigin: true, pathRewrite: { '^/api': '' } } },复制代码 前端请求/api/xxxx时，webpack-dev-server启动的服务器会帮我们请求http://localhost:8089/api/xxxx，同时返回数据。
有些人就会有疑惑，那打包后的文件，是不是也能跨域。前面我们说了，线上部署就不是运行npm run dev，所以，前端是不是跨域要看你怎么部署了。
如果你把打包后的dist文件和后端代码放在一起，那么根本就不存在跨域问题！ 如果前端静态文件和后端不在一起，那么可以用Nginx做转发
server { listen 80; server_name 127.0.0.1; location / { root /data/deered/dist; #前端打包后的dist文件位置 index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://127.0.0.1:8089 #后台地址 } }复制代码 Vue和React
Vue的指令和模板语言让开发者可以很简洁的完成一个复杂的功能，而React的JSX语法，则让开发者拥有更多的自主权。 从Vue转向React的开发者，一开始可能会非常不适应，毕竟v-for v-if v-model这些最基本的功能，React竟然全都要我们自己去实现。
我们其实可以从本质上来看：
一个Vue的组件：
复制代码{ { msg }}
show me
一个React的组件
const styles = { fontWeight: 'normal'}export default class Hello extends Component { constructor(props) { super(props); this.state = { msg: 'Welcome to Your React App', show: false }; } say() { console.log('hi') } render() { return ( {this.state.msg}
{this.state.show ? show me
: null} ) }}复制代码 从两个组件对比就能看见： React组件完全就是一个Class类，你一直在写各种类方法，甚至你的css也是个对象，所以React要求开发者有较好的ES6基础，因为你无时无刻不在写JS
而Vue就不一样了，Vue组件其实就是个普通的对象，你只是在修改这个对象的属性：name data methods components，说的通俗点，你根本就是在配置对象，例如：你配置了这个对象的components属性，于是就可以在模板中使用自定义组件
因此，React本质上是不可能给你提供类似v-for的API，因为JS已经有了for循环，数组也有map方法，你写React就是在写JS，为啥还需要额外的遍历方法呢？而Vue就不同了，它提供的指令，其实就是在内部帮你写JS，所以从React转向Vue的开发者，一开始会觉得，Vue的代码更简洁了。不过，这是靠牺牲自由度换来的，毕竟在React里，怎么实现遍历，完全由你自己决定