昨天突然交给我一个任务,让写个简单的前端页面,然后部署到服务器上去。
我一想,这不是很简单吗,虽然一直在搞c++,但好歹之前也自学且写过一点vue的东西,麻溜搞起来~
为什么在vs下
哭唧唧,因为最近刚换电脑,之前的所有软件环境,都飞了,就这慢到掉渣的内网(不是我,我没说),而且一直在用vs搞c++,一了解果然这哥们也能写前端。废话太多,看下面:
1. 安装node.js
这个不用多说了吧,js运行时,必不可少环境。
傻瓜式安装,自己选好安装地址就行。结束后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+端口访问了。