nginx 的使用

  1. 下载压缩包 nginx/Windows-1.20.2
  2. 解压至磁盘D:\Program Files\nginx-1.20.2\
  3. 右键nginx.exe以管理员的身份运行
  4. 浏览器输入http://localhost/
  5. 修改配置 D:\Program Files\nginx-1.20.2\conf\nginx.conf
  6. 重载配置文件nginx -s reload
  7. 刷新浏览器重新访问

  8. 停止 nginxnginx -s stop

    vue 项目打包到本地 nginx 站点

  9. D盘下新建一个 nginx 站点目录D:/nginxWebsite/

  10. 配置环境变量

    1. # .env.localtest
    2. # 本地调试
    3. NODE_ENV = production
    4. VUE_APP_OUTPUT_DIR = D:/nginxWebsite/projectName/
    5. VUE_APP_BASE_ROUTER = /projectName/
    6. VUE_APP_PUBLIC_PATH = /projectName/

  11. 修改路由

    1. // src/router/index.js
    2. const router = new Router({
    3. base: process.env.VUE_APP_BASE_ROUTER || '/',
    4. mode: 'history'
    5. })

  12. 修改打包配置

    1. // vue.config.js
    2. module.exports = {
    3. outputDir: process.env.VUE_APP_OUTPUT_DIR || 'dist',
    4. publicPath: process.env.VUE_APP_PUBLIC_PATH || '/'
    5. }

  13. 配置打包命令

    1. // package.json
    2. {
    3. "scripts": {
    4.  "build:localtest": "vue-cli-service build --mode localtest"
    5. }
    6. }

  14. 执行打包命令npm run build:localtest

  15. 重新访问http://localhost/projectName

    附

    nginx 部分配置

    1. # 井号表示注释，以英文分号结尾
    2. http {
    3.  server {
    4.      listen       80;
    5.      server_name  localhost;
    6.      root                  D:/nginxWebsite;
    7.      location / {
    8.          root     html;
    9.          index    index.html index.htm;
    10.      }
    11.      location /projectName {
    12.          alias    D:/nginxWebsite/projectName/;
    13.          index    index.html;
    14.          # 处理 vue history 路由刷新出现 404 的问题
    15.          try_files $uri $uri/ /projectName/index.html;
    16.      }
    17.  }
    18. }