vue 项目地址publicPath 和nginx中配置

基础配置vue.config.js通过环境变量 mode配置"build:wis": "vue-cli-service build --mode wis",publicPath: process.env.VUE_APP_URL_ENV === "wis" ? "/dialogue/" : "/",也可以在环境env中添加变量publicPath: process.env.VUE_APP_BASE_

背藏玫瑰

4028人浏览 · 2022-05-13 10:30:44

背藏玫瑰 · 2022-05-13 10:30:44 发布

基础配置

vue.config.js

通过环境变量 mode 配置
"build:wis": "vue-cli-service build --mode wis",

 publicPath: process.env.VUE_APP_URL_ENV === "wis" ? "/dialogue/" : "/",

也可以在环境env中添加变量

  publicPath: process.env.VUE_APP_BASE_URL,

一、含义
‘./’表示相对路径，表示当前目录下的

‘/’表示绝对路径，表示根目录下的。

二、build后
正式环境：打包后的类似<script src="static/js/index.752b9949.js">

测试环境：script type="text/javascript" src="/static/js/index.js">

三、配置
不推荐：publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

推荐：publicPath：‘/aaa/’

路由中使用

const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

这个变量是vue.config,js中 publicPath

也可以自定环境变量

如果没配置会出现什么问题？

publicPath：'/dialogue/'
http://127.0.1.1:9090/dialogue/home 打开页面自动跳转到 http://127.0.1.1:9090/home
就这个页面能打开，其他全部404
上面，随便提一嘴，平时就是一个很小的配置导致项目启动问题。

nginx上面配置

直接上代码，配置了两个都可以用

在nginx bin目录下 nginx -s reload 热重启（不会停止，不会出现服务不能访问）
在nginx bin目录下 nginx stop (停止 500)
nginx start （重启）

   location /dialogue/ {
     try_files $uri $uri/  /dialogue/index.html;
     alias /home/data/chicken-shitieshou-web/dist/;
     index index.html index.htm;
          }

   location ^/dialogue/(.*)\.(js|css|jpg|png|jpeg|svg|woff|ico|tff)$ {
     alias  /home/data/dialogue-web/dist/;
     expires 30d;
   }

   location /dialogue-test/ {
     try_files $uri $uri/ /dialogue-test/index.html;
     alias /home/data/dialogue-test/;
     index index.html index.htm;
     proxy_http_version 1.1;
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection $connection_upgrade;
   }

   location ^/dialogue-test(.*)\.(js|css|jpg|png|jpeg|svg|woff|ico|tff)$ {
     alias /home/data/dialogue-test/;
     expires 30d;
   }

随笔，希望你能用到