昨天突然交给我一个任务，让写个简单的前端页面，然后部署到服务器上去。
我一想，这不是很简单吗，虽然一直在搞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。
重启之后，项目就运行了，可以在浏览器输入ip+端口访问了。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/157441.html
