vue全栈开发部署你需要知道的一些事

个人博客：https://ykloveyxk.github.io/

最近作为超廉价劳动力在帮学校做一个 app 的后台。技术选型的时候实在不想用已经用烂的 jquery + php + mysql 这一套。于是就选择了 Vue + mongodb + nodejs 的模式，也顺带看看这些新技术在实战中的具体表现。开发了一段时间，最近也差不多快完成了，当然免不了踩了一些坑，发出来和大家交流一下，也顺带说说这种技术栈的项目该如何部署。

注：本文不是开发教学文档，只是讨论我在部署阶段遇到的问题。如果你恰好也遇到，那么希望能够帮到你。😁

前端打包

使用 vue + node 进行全栈开发时，前后端是完全分离的，开发完成后需要将 vue 写的前端打包成静态页面部署在服务器上运行，不要直接在服务器上 node run dev……在这个阶段，需要注意以下几点：

1. 打包出现以下或类似错误

ERROR in static/js/0.8d18fe144f17fc217b92.js from UglifyJs
Unexpected token punc «(», expected punc «:» [static/js/0.8d18fe144f17fc217b92.js:45,8]

解决方法：

安装es2015的转化器

1	npm install --save-dev babel-preset-es2015

新建文件 .babelrc，增加内容
1
2
3
{
"presets": ["es2015"]
}

这个错误其实解决起来很简单，就是利用Babel来转化你写的ES2015。但是在我的上篇文章中，有人提 issue 问过我这个问题，在这里就顺带说下。

2. 打包完成部署服务器后，字体图标不显示

解决方案：http://blog.csdn.net/xiaoermingn/article/details/53543001

如果你引用了 font-awesome 或类似的字体图标库，发现部署在服务器上所有的字体图标都不显示了，那么你需要读读我上面列出的这篇文章。这是因为 webpack 有自己的字体文件加载方式。

服务器部署

1. 前端部署

首先建议在服务器上部署nginx，具体部署方法百度有很多，大家自行查找。部署完成后将打包后文件移动至 nginx 的资源目录下。例如：/data/www/

然后按项目所需修改配置文件：例如端口号，项目地址等，例如：

server {
    listen       8088;
        location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
    location /static {
        alias /data/www/dist/static/;
    }
}

注：多说一句，如果你的服务端没有进行相关配置，那么vue-router 请一定不要使用history模式！！否则会出现路由跳转错误的bug！！我当初就是被这个问题困扰了很久，最后去看文档才发现。

2. 后端部署

后端部署很简单，就是在服务器上运行 node 程序，但是不要生硬的 node server &

最好是将后端文件分离出来后，使用 pm2 做负载均衡，pm2 是一个带有负载均衡功能的Node应用的进程管理器.

3. 前后端联系（跨域）

因为后端可能运行在别的端口，那么就会出现跨域情况。使用 nginx 进行反向代理，安装完 nginx 后，配置 nginx 配置文件，即可解决该问题，例如：

server {
    location /api {
            proxy_pass http://***.***.**.**:****/api;
        }
}

到此，前后端部署步骤基本完毕。

项目心得

以下是除开前后端部署，我在项目中遇到的一些其他问题，也和大家分享一下。

mongodb 请务必不要在服务器上无密码裸奔。mongodb因为前段时间的 “ 赎金事件 ” 被很多人觉得安全性存在问题，但是其实是因为大多mongodb数据库在服务器上无密码裸奔。这是非常危险的，请一定不要这么做。
mongoose 中 model在起名时，会发生表名自动复数化的情况，原因为：
Mongoose在创建Model时对Collection的命名策略 - 推酷
因此应该按照 model -> 建表的顺序，如果是从外部导入的表，例如从mysql导入，那么应该保证表名为复数形式，否则会出现无法操作collention的情况。
请务必使用集成开发环境进行项目开发，如果担心网络问题以及需要免费的私人仓库，那么可以使用一些国产的代码托管平台，真的能够为团队开发规避许多不必要的问题。
其实项目中的技术问题很多时候都不是问题，而人和人之间的问题才是真的问题……这个也是我带这个小团队后的切身感受。

后记

如果大家发现我的文章中存在问题，那么请不吝赐教，大家共同进步。如果我转载的文章原作者不愿自己文章被转载，请告知，我会及时删除。如果你觉得我写的对你有点帮助，就点赞鼓励一下，三克油。

全文完