vue项目Nginx部署启动

1.vue打包

        (1)package.json增加打包命令

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 10.16.14.110",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js",
    "build:prod": "webpack-dev-server build",
    "build:stage": "webpack-dev-server build --mode staging"
  },

      (2)指定打包后的文件名(index.js)

        

      (3)打包

2.nginx部署

        (1)上传dist文件到Nginx

      (2)修改配置文件

       server {
        listen       8099;#启动端口
        server_name  localhost;#本机IP
        location / {
    	#add_header Access-Control-Allow-Origin "*";
            root  html/sso;
	    try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
	location /prod-api {
			proxy_pass http://后端接口地址;
		}
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html/sso;
        }
    }

3.重启nginx

        

4.访问流程

       

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目的Docker+Nginx部署可以通过以下步骤完成: 1. 创建Dockerfile:在Vue项目的根目录下创建一个名为Dockerfile的文件,内容如下: ``` # 使用Node作为基础镜像 FROM node:14 as build-stage # 设置工作目录 WORKDIR /app # 复制package.json和package-lock.json到工作目录 COPY package*.json ./ # 安装依赖 RUN npm install # 复制所有文件到工作目录 COPY . . # 构建项目 RUN npm run build # 使用Nginx作为基础镜像 FROM nginx:1.21-alpine # 将构建好的项目复制到Nginx的默认静态文件目录 COPY --from=build-stage /app/dist /usr/share/nginx/html # 复制Nginx配置文件到容器中 COPY nginx.conf /etc/nginx/conf.d/default.conf # 暴露80端口 EXPOSE 80 # 启动Nginx服务 CMD ["nginx", "-g", "daemon off;"] ``` 2. 创建Nginx配置文件:在Vue项目的根目录下创建一个名为nginx.conf的文件,内容如下: ``` server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } } ``` 3. 构建Docker镜像:在终端中进入Vue项目的根目录,执行以下命令构建Docker镜像: ``` docker build -t vue-app . ``` 其中,`vue-app`是镜像的名称,可以根据需要自行修改。 4. 运行Docker容器:执行以下命令运行Docker容器,并将容器的80端口映射到主机的指定端口(例如8888): ``` docker run -d -p 8888:80 vue-app ``` 其中,`8888`是主机的端口号,可以根据需要自行修改。 至此,Vue项目的Docker+Nginx部署就完成了。你可以通过访问`http://localhost:8888`来查看部署后的项目
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值