资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/vue history模式 部署在服务器端的nginx配置 (非根目录)

vue history模式 部署在服务器端的nginx配置 (非根目录)

Caizhenhao / 1360人阅读

摘要：最终，我的解决方案如下配置如下配置路由配置该项目是用的所以只需要修改里面的的部分配置修改最终项目地址为

vue history需要nginx或者其他方式配置一下才可正确访问，否则路由跳转之后刷新一下便会404 具体原因vue-router官网有说明，在此不多说

最近遇到的问题是上了一个小的项目，需要放在更深层次的目录下，上到测试环境 做了官网提到的nginx配置发现不行，之后查阅了一些博客资料，发现都没有一个特别好的方案。最终，我的解决方案如下

nginx配置如下

</>复制代码 
  1. server {
  2.         listen       443 ;
  3.         server_name  m;
  4.         
  5.         root   html/mobile;
  6.         location / {
  7.             index  index.html index.htm;
  8.             try_files $uri $uri/ /auth/index.html;
  9.         }
  10.     }

vue router 配置

</>复制代码 
  1. // 路由配置
  2. const RouterConfig = {
  3.   base: "/auth/",
  4.   mode: "history",
  5.   routes: routers
  6. };

该项目是用的vue-cli2 所以只需要修改config 里面的index.js的build部分

webpack 配置修改

</>复制代码 
  1. build: {
  2.     // Template for index.html
  3.     index: path.resolve(__dirname, "../dist/auth/index.html"),
  4.     // Paths
  5.     assetsRoot: path.resolve(__dirname, "../dist"),
  6.     assetsSubDirectory: "auth/static",
  7.     assetsPublicPath: "/",
  8.     /**
  9.      * Source Maps
  10.      */
  11.     productionSourceMap: false,
  12.     devtool: "#source-map",
  13.     productionGzip: false,
  14.     productionGzipExtensions: ["js", "css"],
  15.     bundleAnalyzerReport: process.env.npm_config_report
  16.   }

最终项目地址为 m.xxx.com/auth/

GPU云服务器 云服务器 nginx配置在哪 非贪婪模式 非阻塞模式 非站点目录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99287.html

相关文章

  • vue history模式 部署在服务器端的nginx配置 (非根目录)

    摘要：最终，我的解决方案如下配置如下配置路由配置该项目是用的所以只需要修改里面的的部分配置修改最终项目地址为 vue history需要nginx或者其他方式配置一下才可正确访问，否则路由跳转之后刷新一下便会404 具体原因vue-router官网有说明，在此不多说 最近遇到的问题是上了一个小的项目，需要放在更深层次的目录下，上到测试环境 做了官网提到的nginx配置发现不行，之后查阅了一些...

    tangr206 评论0 收藏0

  • vue vue-router(history模式) node(express)项目部署到云主机上的n

    摘要：这个方法我没有尝试过，不过应该是可行的这样的优点是很简便，适合小型的网站项目将打包的项目和服务端分别部署客户端根目录主页避免模式刷新管理控制后台服务端跨域这样部署虽然稍微麻烦一点，但可以适应很多场景，而且开发分工更方便，结构也一目了然 我个人想了2种部署方案 1、将vue项目打包后放入node服务端的静态资源中访问 整体结构基本是这样的 showImg(https://segmentf...

    Honwhy 评论0 收藏0

  • Vue-项目从本地搭建到线上部署（wǒ shì biaō tí dǎng）

    摘要：放置在目录下或通过绝对路径被引用。对于相关来说，我们推荐使用而不是直接链式指定。在不更改配置文件的情况下，前端页面迭代发布，不需要重启服务。 作者：gauseen 0. 关于 Vuejs 简介：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，易用、灵活、高效。 生态系统 项目 介绍 awesome-vue Vue.js 相关很棒的...

    Arno 评论0 收藏0

  • Vue项目部署遇到的问题及解决方案

    摘要：模式部署没有什么问题，只要访问到服务器上的，就可以访问网站了。问题起因在做年度账单项目的时候，项目部署的时候，用的是模式。这样几项配置后，就可以在子目录下访问网站，刷新也没有问题。 写在前面 Vue-Router 有两种模式，默认是 hash 模式，另外一种是 history 模式。 hash：也就是地址栏里的 # 符号。比如 http://www.example/#/hello，...

    姘搁『 评论0 收藏0

发表评论

登陆后可评论

0条评论

Caizhenhao

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<