在vs2017上写vue项目以及顺便部署到远程桌面nginx服务器上

昨天突然交给我一个任务，让写个简单的前端页面，然后部署到服务器上去。
我一想，这不是很简单吗，虽然一直在搞c++，但好歹之前也自学且写过一点vue的东西，麻溜搞起来~

这里引出文章标题：

为什么在vs下

哭唧唧，因为最近刚换电脑，之前的所有软件环境，都飞了，就这慢到掉渣的内网（不是我，我没说），而且一直在用vs搞c++，一了解果然这哥们也能写前端。废话太多，看下面：

1. 安装node.js

这个不用多说了吧，js运行时，必不可少环境。安装很简单，点击这里：
下载地址：https://nodejs.org/zh-cn/

傻瓜式安装，自己选好安装地址就行。结束后win+R输入cmd，检查成功与否：

2. vs下新建vue项目

首先，检查自己有没有安装node支持扩展工具：
点击工具->获取工具和功能：

总之勾选，点击右下角修改，然后等待更新完毕。

之后新建项目，
设好名称和位置，点确定，就这样新建了一个vue项目。

这时还有问题，因为项目所需要的包都还缺失，那么鼠标右击项目名，选择在此处打开命令提示符，之后输入 npm install等待所有包下载完毕。

一切顺利的话，再输入， npm run serve，启动vue项目出现以下即表示成功：

之后就是愉快的写自己的vue项目喽。

3. 项目打包部署（nginx及远程桌面）

一般而言部署到远端最容易出问题的是端口占用，所以这里只记录一下修改项目端口，除非你有更多复杂需求，这里只讲最简单的。

第一步

众所周知，现在1202年了，vue项目早都没有了明面上的配置文件，所以改端口，需要我们自己新建一个vue.config.js文件。如下：

记住位置在项目根目录下，不要搞错。
然后里面只需要这一段代码即可：

module.exports = {
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8050,    //你的端口
        https: false,
        hotOnly: false,
        // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
        proxy: null, // string | Object
        before: app => { }
    }
}

OK,完工。

第二步

之后，同样右键打开该项目命令窗口，执行npm run build即可。
然后dist文件夹就是我们要扔到服务器上的东西。

第三步

开始菜单找到远程桌面连接，输入你们的IP、账户、密码穿越过去；

将dist文件夹扔到服务器上，随便哪个盘。哦这里默认远端已经安装好了nginx，这里不再赘述，相关教程太多了。

然后最重要的配置来了：
在nginx安装目录下找到conf——>nginx.conf，打开编辑：

server {
		listen		端口号;
		server_name 服务器ip;
		location / {
			root dist文件夹所在路径;
		}

配置进去后，记得保存，因为修改了配置文件，所以需要重新启动一下nginx。

nginx相关命令

重启之后，项目就运行了，可以在浏览器输入ip+端口访问了。