vue对接阿里云api（vue项目部署到阿里云）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
本篇文章给大家谈谈vue对接阿里云api，以及vue项目部署到阿里云对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
怎么把VUE项目部署到服务器上面
1.使用xshell登录到阿里云服务器。安装nginx（本文安装到/etc下）
[plain] view plain copy
cd /etc
apt-get update
apt-get install nginx
2.首先先配置nginx，然后再根据配置文件做下一步操作
打开/etc/nginx/nginx.conf文件
[plain] view plain copy
vim /etc/nginx/nginx.conf
在nginx.conf中配置如下：
[plain] view plain copy
user www-data;
worker_processes auto;
pid /run/nginx.pid;
events {
worker_connections 768;
# multi_accept on;
}
http {
##
# Basic Settings
##
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
##
# Gzip Settings
##
gzip on;
gzip_disable "msie6";
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
##
# Virtual Host Configs
##
gzip on;
gzip_disable "msie6";
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
#以下为我们添加的内容
server {
listen 80;
server_name your-ipaddress;
root /home/my-project/;
index index.html;
location /datas {
rewrite ^.+datas/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass ;
}
}
}
接下来就根据配置文件进行下一步工作。配置文件中的server_name后面是阿里云服务器的ip地址
3.配置文件中的listen是nginx监听的端口号，所以需要在阿里云服务器上为80端口添加安全组规则
在本地的浏览器登录阿里云服务器-进入控制台-点击安全组-点击配置规则-点击添加安全组规则，之后配置如下（注：入方向和出方向都要配置）
4.配置文件中的root和index那两行表示我们把项目文件夹放在/home/my-project下
例如有两个项目文件夹分别为test1，test2，里面都有index.html。则目录结构如下
/home
|--my-project
|--test1
|--index.html
|--test2
|--index.html
则在浏览器输入
服务器便会在/home/my-project中找到test1下的index.html执行；
如果在浏览器中输入
服务器便会在/home/my-project中找到test2下的index.html执行；
这样便可以在服务器下放多个项目文件夹。
5.所以我们也需要在本地项目的config/index.js里的build下进行修改,如果要把项目放到test1下，则
[javascript] view plain copy
assetsPublicPath: '/test1/',
如果用到了vue-router，则修改/router/index.js
[javascript] view plain copy
export default new Router({
base: '/test1/', //添加这行
linkActiveClass: 'active',
routes
});
6.nginx配置文件中的location则是针对跨域处理，表示把对/datas的请求转发给,本文中这个下就是需要的数据，例如,在本地项目文件中ajax请求数据的地方如下
[javascript] view plain copy
const url = '/datas/seller';
this.$http.get(url).then((response) = {
.....
});
7.修改后在本地命令行下运行:cnpm run build 生成dist文件。把dist文件里的index.html和static文件上传到服务器的/home/my-project/test1下，目录结构如下
/home
|--my-project
|--test1
|--index.html
|--static
8.启动nginx
[plain] view plain copy
service nginx start
9.至此项目部署成功，在浏览器下输入: 即可
vue页面传值能传图片吗
可以
1.云储存
常见的 七牛云，OSS（阿里云）等，这些云平台提供API接口，调用相应的接口，文件上传后会返回图片存储在服务器上的路径，前端获得这个路径保存下来提交给后端即可。此流程处理相对简单。
主要步骤
向后端发送请求，获取OSS配置数据
文件上传，调用OSS提供接口
文件上传完成，后的文件存储在服务器上的路径
将返回的路径存值到表单对象中
代码范例
我们以阿里的 OSS 服务来实现，们试着来封装一个OSS的图片上传组件。
通过element-ui的upLoad组件的 http-request 参数来自定义我们的文件上传，仅仅使用他组件的样式，和其他上传前的相关钩子（控制图片大小，上传数量限制等）。
vue element-ui 上传图片到oss阿里云(第三方服务)
一、阿里云设置：
8.1 进入 OSS 管理控制台 界面。
8.2 在左侧存储空间列表中，单击目标存储空间名称，打开该存储空间概览页面。
8.3 单击 基础设置 页签，找到 跨域设置 区域，然后单击 设置。
8.4 单击 创建规则，打开 设定跨域规则 对话框。
8.5 设置跨域规则。
8.6 单击 确定。
说明： 您也可以对已有的规则进行编辑和删除操作。
截止到这里，阿里云创建Bucket、角色、授权、跨域等前期准备工作就全部完成了。
二、安装使用：
vue对接阿里云api的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue项目部署到阿里云、vue对接阿里云api的信息别忘了在本站进行查找喔。