前端将vue打包成镜像发布

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、总体预览

二、打包配置

2.1 default.conf

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html/;
        index  index.html index.htm;
        # try_files $uri $uri/ /index.html;
    }
    location /finalLearn {
        alias  /usr/share/nginx/html/;
        # index index.html index.htm;
        try_files $uri /finalLearn/index.html;
    }

    error_page   500 502 503 504  /50x.html;
}

2.2 Dockerfile

# 基础镜像
FROM nginx

MAINTAINER cw

# 删除原有的default.conf文件
RUN rm /etc/nginx/conf.d/default.conf
# 增加自定义default.conf文件到对应目录
ADD default.conf /etc/nginx/conf.d/
# 将dist目录下的文件复制到nginx内的目录下，与上文对应
COPY dist/ /usr/share/nginx/html/

2.3 打包

docker build -t <自定义tag>

三、问题思考

打包发布后，有时候出现错误 Uncaught SyntaxError: Unexpected token <
大多情况下静态文件js、css等访问不到的问题。具体配置需和前端打包方式对应上。
但是如果条件允许可以把js等静态文件放在OSS上，这种问题也不会发生，同时也可cdn加速。具体结当下场景。

出现错误参考：

https://www.jianshu.com/p/f95cbf950e6f