如何部署Vue项目

有篇好文章 windows下nginx部署若依开源项目

有篇好文章如何用electron技术将Vue项目打包成exe可执行文件

一般部署就这几种方式

1. Vue项目打包后部署在nginx服务器下,后端部署在Tomact上(推荐,可跨域,不会暴露后端地址及端口)
2. Vue项目打包后和后端一起部署在Tomact上(小规模开发省事,会暴露后端端口)
   • 这种部署方式须注意,Vue路由的模式必须是hash且项目中的接口地址都必须是真实的后端地址,配置成'/'就好,'/'就代表了去搜索本机的接口,vue.config中的publicPath设置为'/',这种方式双击打包后的文件是跑不了的,因为需要放在Tomact服务器中才能显示,并且如果后端配置了拦截器之类的东西的话,还要把打包后的静态资源放入白名单里(貌似前后端又耦合起来了,但对于个人开发者而言貌似问题不大)。 Vue项目路由有两种形式: hash和history,hash的话就是浏览器的栏里会带有#符号,history则不会.
   • 为什么必须是hash?我自己的理解是Vue的页面是伴随着路由而切换的,因为此种部署方式是与后端一起在tomact中部署的,history模式会带来歧义,比如我要访问/index,这个/index到底是一个controller呢还是Vue的一个路由呢?个人理解,估计有误,望网友指正.
3. 用electron技术将Vue项目打包成exe可执行文件,然后给客户,后端部署在Tomact上(electron相关资料少,打包过程中容易遇到太多坑)。
   • 这种的话需要Vue项目打包后的文件双击后可以直接跑,因此Vue路由的模式必须是hash且项目中的接口地址都必须是真实的后端地址,vue.config中的publicPath设置为'./',

无论是上边哪种方式,需要注意的点是如果Vue项目配置了跨域,注意跨域只在开发环境中有效也就是平时npm run dev的那种,项目打包后，配置中的/api访问都会映射到文件上,项目中配置的代理将失效。如果想让Vue项目中的跨域设置继续生效,则需要使用nginx的反向代理将所有的请求映射到对应的后端接口上去,否则的话需在项目中指定真实的后端地址

第一种方式部署

首先将你的VUE项目打包好,在本地运行看有木有毛病,资源路径啥的都先解决啦
如有问题,看这篇 添加链接描述

1. 安装docker 添加链接描述.

2. 安装nginx镜像

docker pull nginx:latest

3. 启动nginx容器
   添加链接描述
4. 将你的项目放到nginx容器中的html文件里
   首先要进入容器(须知道容器id)的命令是

docker exec -it e72c5a233fff bash

比如项目index.html在本地主机/home/yangcai/nginx/html目录下存放着,需要向容器 /usr/share/nginx/html目录中中拷贝

docker cp /home/yangcai/nginx/html/index.html e72c5a233fff:/usr/share/nginx/html

从容器复制到主机docker cp containerID:container_path host_path的命令

docker cp e72c5a233fff:/etc/nginx/conf.d/default.conf /home/yangcai/nginx/conf.d

5. 访问你的域名就可直接访问到你的项目啦

第四步中如果你vue项目中的index.html不在 /usr/share/nginx/html当前目录下,则需要更容器中改/etc/nginx/conf.d/default.conf文件中root的位置
如 我vue中项目index.html在dist目录下,则需要更改root路径为
/usr/share/nginx/html/dist

这里贴上原default.conf文件

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

另外一种方式,启动容器时可以采用文件映射,在本地主机创建default.conf,映射nginx容器中的配置文件default.conf,改变root路径指向本地主机的dist目录,但我没成功过,这里就不说啦,可以看看别人的博客