vue项目部署到tomcat或者通过nginx部署到docker

部署tomcat项目根目录新建vue.config.js内编写

module.exports = {
  lintOnSave: true,
 
  devServer: {
		host: '0.0.0.0',
  },
	publicPath: '/', //项目路径
	outputDir: 'dist', //打包出来的项目名，默认dist
}

然后打包放到tomcat的webapp目录下，启动tomcat进行访问

通过nginx部署docker

先通过dokcer pull nginx拉取nginx镜像

1. 也需要新建vue.config.js，代码同上
2. 根目录新建nginx文件夹
3. nginx文件夹新建default.conf文件，编写内容如下

server {
    listen       80;
    server_name  localhost;

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

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
		try_files $uri $uri/ /index.html; // 解决刷新404问题
    }

    #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;
    }
}

4. 项目根目录新建Dockerfile文件，代码如下

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

5. 项目打完包之后，通过docker build -t application:0.0.1 .进行打成镜像，注意不要忘记.，-t后面跟项目名，如果不加:后面的，默认laster。
6. docker运行项目-p后面端口号，-d后台运行，--name的第一个名字是容器的名字，第二个名字是镜像的名字，就是你前面取的名字

docker run \                       
-p 8080:80 \
-d --name vueApp \
application:0.0.1

总结

部署到服务器需要注意刷新404的问题