当前位置: 首页 > news >正文

微信云托管(本地调试)⑥:nginx、vue刷新404问题

一、nginx默认路径

 

        1.1、默认配置文件路径:/etc/nginx/nginx.conf

        1.2、默认资源路径:/usr/share/nginx/html/index.html

二、修改nginx.conf配置

注意配置中的:include /etc/nginx/conf.d/*.conf;  里面包了一个server配置文件) 

user  nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;
events {worker_connections  1024;
}http {include       /etc/nginx/mime.types;default_type  application/octet-stream;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  /var/log/nginx/access.log  main;sendfile        on;#tcp_nopush     on;keepalive_timeout  65;#gzip  on;#include /etc/nginx/conf.d/*.conf;server {listen       80;listen  [::]:80;server_name  localhost;#access_log  /var/log/nginx/host.access.log  main;location / {root   /usr/share/nginx/html; # vue目录地址(dist)index  index.html index.htm;try_files $uri $uri/ /index.html;  # 解决刷新页面变成404问题的代码}#error_page  404              /404.html;error_page   500 502 503 504  /50x.html;location = /50x.html {root   /usr/share/nginx/html;}}
}

三、dockerfile

COPY ./nginx.conf /etc/nginx/nginx.conf

COPY --from=nodeBuild /y-qd/dist /usr/share/nginx/html

# 二开推荐阅读[如何提高项目构建效率](https://developers.weixin.qq.com/miniprogram/dev/wxcloudrun/src/scene/build/speed.html)
# 选择构建用基础镜像。如需更换,请到[dockerhub官方仓库](https://hub.docker.com/_/java?tab=tags)自行选择后替换。# 引入Node.js
FROM node:12.22.12 AS nodeBuild# npm镜像,解决报错而引入
RUN npm config set registry https://registry.npm.taobao.org# install simple http server for serving static content
# 全局http-server用于本地运行
#RUN npm install -g http-server# make the 'app' folder the current working directory
# 指定构建过程中的工作目录
WORKDIR /y-qd# copy both 'package.json' and 'package-lock.json' (if available)
# 将src目录下所有文件,拷贝到工作目录中src目录下(.gitignore/.dockerignore中文件除外)
COPY package*.json ./# install project dependencies
RUN npm install# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .# build app for production with minification
# 生产打包,对应脚本"build": "node build/build.js"
RUN npm run build
#本地,对应脚本"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
#RUN npm run dev# production stage
#代理nginx,nginx直接访问
FROM nginx:stable-alpine AS nginxBuild
COPY ./nginx.conf /etc/nginx/nginx.conf
COPY --from=nodeBuild /y-qd/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]#本地对应端口
#EXPOSE 8088
#CMD [ "http-server", "dist" ]

四、注意

4.1、

完~

http://www.lryc.cn/news/115334.html

相关文章:

  • 数据结构 二叉树(一篇基本掌握)
  • ​可视化绘图技巧100篇高级篇(四)-南丁格尔玫瑰图(二)
  • Stable Diffusion - Candy Land (糖果世界) LoRA 提示词配置与效果展示
  • ES6学习-module语法
  • Flutter 实现按位置大小比例布局的控件
  • ES6 - 对象新增的一些常用方法
  • 半导体存储电路
  • web前端之CSS操作
  • Python SQLAlchemy ( ORM )
  • 鉴源实验室丨汽车网络安全运营
  • 分布式链路追踪之SkyWalking详解和实战
  • 【工程实践】使用EDA(Easy Data Augmentation)做数据增强
  • ClickHouse(十三):Clickhouse MergeTree系列表引擎 - ReplicingMergeTree
  • 机器学习笔记之优化算法(十)梯度下降法铺垫:总体介绍
  • Selenium 根据元素文本内容定位
  • 第17章-Spring AOP经典应用场景
  • Leetcode周赛 | 2023-8-6
  • ts中interface自定义结构约束和对类的约束
  • Oracle单实例升级补丁
  • 力扣初级算法(二分查找)
  • 探索未来:直播实时美颜SDK在增强现实(AR)直播中的前景
  • SQL 单行子查询 、多行子查询、单行函数、聚合函数 IN 、ANY 、SOME 、ALL
  • 【第一阶段】kotlin的range表达式
  • 网络防御(5)
  • gradle 命令行单元测试执行问题
  • 剑指Offer12.矩阵中的路径 C++
  • 金鸣识别将无表格线的图片转为excel的几个常用方案
  • 刚刚更新win11,记事本消失怎么处理?你需要注意些什么?
  • 【QT】 QTabWidgetQTabBar控件样式设计(QSS)
  • 【个人记录】CentOS7 编译安装最新版本Git