侧边栏壁纸
博主头像
小莫唐尼博主等级

为 API 生,为框架死,为 debug 奋斗一辈子丨talk is cheap,show me the code.

  • 累计撰写 20 篇文章
  • 累计创建 35 个标签
  • 累计收到 105 条评论

目 录CONTENT

文章目录
vue

Vue + Nginx 使用子目录部署上线

小莫唐尼
2022-03-19 / 0 评论 / 6 点赞 / 205 阅读 / 1,216 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-03-19,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

配置前的访问路径:https://xx.xx.com/#/

配置后的访问路径:https://xx.xx.com/web/#/

一、vue cli部分的配置

vue cli项目中需要对两个地方进行配置,,具体配置如下:

1.配置router/index.js路由:取消mode:history路由模式,设置base:'/web/',配置如下:

const router = new Router({
  // mode: "history", // 去掉url中的#  // 
  base: '/web/',// 配置nginx发布时候的子目录
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
});

2.配置vue.config.js中的文件打包路径,将publicPath: process.env.NODE_ENV === "production" ? "/web/" : "/",生产环境中的publicPath:"/web/",配置如下:

module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.925i.cn/。如果应用被部署在一个子路径上,
  // 你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.925i.cn/web/,
  // 则设置 baseUrl 为 /web/。
  publicPath: process.env.NODE_ENV === "production" ? "/web/" : "/",
  // 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)
  outputDir: "dist",
  // 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
  assetsDir: "static",
  
  // 此处省略无关代码...
}

二、nginx部分的配置
server {
  listen       80;
  server_name  ip;
  index        index.html;
  # 省略其他配置
  
  location / {
    root   /home/html/app;
    index  indx.html index.htm;
    try_files $uri $uri/ /app/web/index.html;
    # 省略其他配置
  }
  
  # 二级目录配置--重点
  location /web/ {
    alias     /home/html/app/web/;
    index     indx.html index.htm;
    try_files $uri $uri/ /app/web/index.html;
    # 省略其他配置
  }
  
}
6

评论区