vue项目部署到ngix服务器

注：
本文选择了nginx做web服务器。因为在本文vue前端项目中，需要从接口获取数据，可是数据与vue前端项目是在同一ip地址但不同端口号，所以需要跨域读取数据。本文的跨域处理是使用了nginx。环境：阿里云服务器（ubuntu 64bit）xshellnginx1.使用xshell登录到阿里云服务器。安装nginx（本文安装到/etc下）cd /etc apt-get update apt-get install nginx cd /etcapt-get updateapt-get install nginx122.首先先配置nginx，然后再根据配置文件做下一步操作打开/etc/nginx/nginx.conf文件vim /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; } } } 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/?(.)$ /KaTeX parse error: Expected 'EOF', got '}' at position 114: … }̲ }}…http.get(url).then((response) => { …… }); const url = ‘/datas/seller’; this.$http.get(url).then((response) => { … });1237.修改后在本地命令行下运行:cnpm run build 生成dist文件。把dist文件里的index.html和static文件上传到服务器的/home/my-project/test1下，目录结构如下/home |–my-project |–test1 |–index.html |–static8.启动nginxservice nginx start service nginx start9.至此项目部署成功，在浏览器下输入: http://ip/test1/index.html 即可