如何部署vue前端项⽬到服务器上（nginx处理跨域）
注：
本⽂选择了nginx做web服务器。
因为在本⽂vue前端项⽬中，需要从接⼝获取数据，可是数据与vue前端项⽬是在同⼀ip地址但不同端⼝号，所以需要跨域读取数据。
本⽂的跨域处理是使⽤了nginx。
环境：
阿⾥云服务器（ubuntu 64bit）
xshell
nginx
1.使⽤xshell登录到阿⾥云服务器。安装nginx（本⽂安装到/etc下）
cd /etcnginx部署前端项目
apt-get update
apt-get install nginx
2.⾸先先配置nginx，然后再根据配置⽂件做下⼀步操作
打开/etc/f⽂件
vim /etc/f
在f中配置如下：
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/pes;
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 ip:port;
}
}
}
接下来就根据配置⽂件进⾏下⼀步⼯作。配置⽂件中的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下，则assetsPublicPath: '/test1/',
如果⽤到了vue-router，则修改/router/index.js
export default new Router({
base: '/test1/',  //添加这⾏
linkActiveClass: 'active',
routes
});
const url = '/datas/seller';
this.$(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
service nginx start
9.⾄此项⽬部署成功，在浏览器下输⼊:  ip/test1/index.html  即可

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。