一、nginx默認(rèn)路徑

? ? ? ? 1.1、默認(rèn)配置文件路徑：/etc/nginx/nginx.conf 或 /home/centos/nginx/conf/nginx.conf

? ? ? ? 1.2、默認(rèn)資源路徑：/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

# 二開推薦閱讀[如何提高項目構(gòu)建效率](https://developers.weixin.qq.com/miniprogram/dev/wxcloudrun/src/scene/build/speed.html)
# 選擇構(gòu)建用基礎(chǔ)鏡像。如需更換，請到[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
# 指定構(gòu)建過程中的工作目錄
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
# 生產(chǎn)打包，對應(yīng)腳本"build": "node build/build.js"
RUN npm run build
#本地，對應(yīng)腳本"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;"]

#本地對應(yīng)端口
#EXPOSE 8088
#CMD [ "http-server", "dist" ]

四、注意

4.1、文章來源地址http://www.zghlxwxcb.cn/news/detail-632740.html

完~

到了這里，關(guān)于微信云托管（本地調(diào)試）⑥：nginx、vue刷新404問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！