一般部署就这几种方式
- Vue项目打包后部署在nginx服务器下,后端部署在Tomact上(
推荐,可跨域,不会暴露后端地址及端口
) - Vue项目打包后和后端一起部署在Tomact上(
小规模开发省事,会暴露后端端口
)
- 这种部署方式须注意,Vue路由的模式必须是
hash
且项目中的接口地址都必须是真实的后端地址,配置成'/'就好,'/'就代表了去搜索本机的接口
,vue.config中的publicPath
设置为'/'
,这种方式双击打包后的文件是跑不了的,因为需要放在Tomact服务器中才能显示,并且如果后端配置了拦截器之类的东西的话,还要把打包后的静态资源放入白名单里(貌似前后端又耦合起来了,但对于个人开发者而言貌似问题不大
)。 Vue项目路由有两种形式: hash和history,hash的话就是浏览器的栏里会带有#符号,history则不会. - 为什么必须是hash?我自己的理解是Vue的页面是伴随着路由而切换的,因为此种部署方式是与后端一起在tomact中部署的,history模式会带来歧义,比如我要访问/index,这个/index到底是一个controller呢还是Vue的一个路由呢?个人理解,估计有误,望网友指正.
- 用electron技术将Vue项目打包成exe可执行文件,然后给客户,后端部署在Tomact上(
electron相关资料少,打包过程中容易遇到太多坑
)。
- 这种的话需要Vue项目打包后的文件双击后可以直接跑,因此Vue路由的模式必须是
hash
且项目中的接口地址都必须是真实的后端地址
,vue.config中的publicPath
设置为'./'
,
无论是上边哪种方式,需要注意的点是如果Vue项目配置了跨域,注意跨域只在开发环境中有效也就是平时npm run dev的那种,项目打包后,配置中的/api访问都会映射到文件上,项目中配置的代理将失效。如果想让Vue项目中的跨域设置继续生效,则需要使用nginx的反向代理将所有的请求映射到对应的后端接口上去,否则的话需在项目中指定真实的后端地址
第一种方式部署
首先将你的VUE项目打包好,在本地运行看有木有毛病,资源路径啥的都先解决啦
- 安装docker 安装nginx镜像
docker pull nginx:latest
- 启动nginx容器添加链接描述
- 将你的项目放到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
- 访问你的域名就可直接访问到你的项目啦
第四步中如果你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目录,但我没成功过,这里就不说啦,可以看看别人的博客