怎么把VUE项目部署到服务器上面

前后端分离开发,前端用的VUE,将接口都放了进去,我要怎么把这个项目部署到服务器上面,越详细越好,在线等,挺急的,谢谢!... 前后端分离开发,前端用的VUE,将接口都放了进去,我要怎么把这个项目部署到服务器上面,越详细越好,在线等,挺急的,谢谢! 展开
 我来答
网站安全服务器安全
2018-05-24 · 百度认证:青岛四海通达电子科技有限公司官方账号
网站安全服务器安全
青岛四海通达电子科技有限公司坐落于美丽的海滨城市青岛,是专业致力于网站安全和服务器安全的领导者和推动者。安全服务于互联网金融、游戏平台、移动APP软件、O2O&电商、支付平台、企业网站等
向TA提问
展开全部

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 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下,则

    [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的请求转发给http://ip:port,本文中这个http://ip:port下就是需要的数据,例如http://ip:port/seller,在本地项目文件中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.至此项目部署成功,在浏览器下输入:  http://ip/test1/index.html  即可

         

          

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式