我使用的是阿里云服务器CentOS 7.3 64位操作系统。
一、使用Xshell连接云服务器
1.百度下载一个Xshell和Xftp并安装。
2.双击打开Xshell，并新建一个连接。（主机就是阿里云上创建的实例的公网ip）
3.配置好主机后点击连接，输入登录名和密码，登录名就是购买服务器时输入的登录名和密码。
4.点击确定后即可成功连接到云服务器，连接成功如下图：
image.png
二、vue项目打包上线
1.当我们在本地完成项目开发，可以成功访问项目页面时，运行 npm run build 命令，可以看到项目下有一个dist文件夹，这就是vue项目打包后的文件。
2.在Xshell中点击xftp工具图标可打开文件界面。再次输入密码后可看到服务器端的文件夹目录。
3.把本地打包好的文件放到服务器中，我是放到opt目录下vue-website-pro项目下的，vue-website-pro是我的项目名称。
image.png
当我们按照上面步骤打包上线后，访问公网ip，是没法看到页面的。这是因为我们不可能通过一台电脑的ip就去访问电脑的文件，云服务器相当于就是一台电脑。所以我们还需要配置服务器代理，我是通过配置nginx实现的，除了nginx还有其他很多服务器也可以实现。如apache等。
三、nginx安装配置
1.在Xshell终端，也就是命令行窗口，输入命令 yum install nginx ，当需要确认时输入”y“回车。
2.安装完成后，输入 service nginx start 启动nginx服务。
3.通过命令 nginx -t 查看nginx所在的安装目录。nginx默认会安装在 /etc/ 目录下
image.png
4.在命令行输入命令
cd /etc/nginx 切换到nginx目录下，再输入 cat nginx.conf 可查看当前nginx配置文件。5.在nginx目录下，输入
vim nginx.conf 进入nginx配置编辑模式，然后按键盘 i 键，当命令行左下角出现-- INSERT-- 的时候，通过鼠标上下键进行文件修改，具体配置如下图：
- 我的vue本地跨域是
module.exports = {
devServer:{
proxy:{
'/api':{
target:'http://182.92.218.236/zhihu',
pathRewrite:{
'^/api':''
}
}
},
},
publicPath:'./'
}
- nginx配置
server {
listen 80;
server_name 123.57.109.28; //server_name是公网IP
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
root /opt/vue-website-pro/dist/; //root是dist文件夹所在目录
try_files $uri $uri/ /index.html; //如果没有使用vue-router则无需配置try_files
}
location /prod{
proxy_pass http://182.92.218.236/zhihu; //proxy_pass 是后台服务器地址
add_header Content-Type "text/plain;charset=utf-8";
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST';
}
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
6.当完成Nginx配置文件的修改后，按键盘ESC键退出编辑模式，然后输入 :wq 并回车，保存修改并退出。
7.修改完nginx配置文件后，需要输入 nginx -s reload 重启nginx配置。这里如果重启失败，可输入 nginx -c /etc/nginx/nginx.conf ，然后再次重启。
网友评论