如何部署vue前端项目到服务器上(nginx处理跨域)
2018-01-14 10:18
1946 查看
注:
本文选择了nginx做web服务器。
因为在本文vue前端项目中,需要从接口获取数据,可是数据与vue前端项目是在同一ip地址但不同端口号,所以需要跨域读取数据。本文的跨域处理是使用了nginx。
环境:
阿里云服务器(ubuntu 64bit)
xshell
nginx
1.使用xshell登录到阿里云服务器。安装nginx(本文安装到/etc下)
cd /etc
apt-get update
apt-get install nginx
2.首先先配置nginx,然后再根据配置文件做下一步操作
打开/etc/nginx/nginx.conf文件
vim /etc/nginx/nginx.conf在nginx.conf中配置如下:
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 http://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
则在浏览器输入http://ip/test1/index.html
服务器便会在/home/my-project中找到test1下的index.html执行;
如果在浏览器中输入http://ip/test2/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
});6.nginx配置文件中的location则是针对跨域处理,表示把对/datas的请求转发给http://ip:port,本文中这个http://ip:port下就是需要的数据,例如http://ip:port/seller,在本地项目文件中ajax请求数据的地方如下
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
service nginx start9.至此项目部署成功,在浏览器下输入: http://ip/test1/index.html 即可
本文选择了nginx做web服务器。
因为在本文vue前端项目中,需要从接口获取数据,可是数据与vue前端项目是在同一ip地址但不同端口号,所以需要跨域读取数据。本文的跨域处理是使用了nginx。
环境:
阿里云服务器(ubuntu 64bit)
xshell
nginx
1.使用xshell登录到阿里云服务器。安装nginx(本文安装到/etc下)
cd /etc
apt-get update
apt-get install nginx
2.首先先配置nginx,然后再根据配置文件做下一步操作
打开/etc/nginx/nginx.conf文件
vim /etc/nginx/nginx.conf在nginx.conf中配置如下:
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 http://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
则在浏览器输入http://ip/test1/index.html
服务器便会在/home/my-project中找到test1下的index.html执行;
如果在浏览器中输入http://ip/test2/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
});6.nginx配置文件中的location则是针对跨域处理,表示把对/datas的请求转发给http://ip:port,本文中这个http://ip:port下就是需要的数据,例如http://ip:port/seller,在本地项目文件中ajax请求数据的地方如下
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
service nginx start9.至此项目部署成功,在浏览器下输入: http://ip/test1/index.html 即可
相关文章推荐
- vue项目如何使用nginx配置跨域
- Vue-router+webpack单页项目服务器部署(nginx)
- nginx部署Vue前端项目
- vue项目部署gitHub教程,如何创建github服务器
- vue脚手架做的项目如何放在服务端,vue项目部署到服务器
- 【Web前端】Vue.js项目部署到服务器
- 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题
- WebStorm前端开发工具之如何将项目部署到Tomcat服务器
- 为什么vue+webpack需要用到node,如何部署项目到服务器?
- 如何将Java Web项目部署到服务器上
- 如何把php项目部署到阿里云服务器window server2012__含公网ip访问时jquery/ajax失效解决办法
- 详细的图文教程来实现 eclipse环境下如何配置tomcat,并且把项目部署到Tomcat服务器上
- CentOS服务器,Nginx+Tomcat 上部署javaEE项目,负载均衡
- Eclipse环境下如何配置tomcat,并且把项目部署到Tomcat服务器上
- vue项目部署到apache服务器页面空白的问题
- Nginx服务器中处理AJAX跨域请求的配置方法讲解
- vue.js项目nginx部署教程
- vue-cli打包之后的项目在nginx的部署
- 详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点
- vue、react等单页面项目应该这样子部署到服务器