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

tangr206 发布于2019-07-25 14:30 / 3377人阅读

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

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

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

nginx配置如下

server {
        listen       443 ;
        server_name  m;
        
        root   html/mobile;
        location / {
            index  index.html index.htm;
            try_files $uri $uri/ /auth/index.html;
        }
    }

vue router 配置

// 路由配置
const RouterConfig = {
  base: "/auth/",
  mode: "history",
  routes: routers
};

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

webpack 配置修改

build: {
    // Template for index.html
    index: path.resolve(__dirname, "../dist/auth/index.html"),
    // Paths
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "auth/static",
    assetsPublicPath: "/",
    /**
     * Source Maps
     */
    productionSourceMap: false,
    devtool: "#source-map",
    productionGzip: false,
    productionGzipExtensions: ["js", "css"],
    bundleAnalyzerReport: process.env.npm_config_report
  }

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

服务器托管专线服务 nginx配置在哪非贪婪模式非阻塞模式非站点目录

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

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

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

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

Caizhenhao 2019-08-23 13:12 评论0 收藏0
vue vue-router(history模式) node(express)项目部署到云主机上的n

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

Honwhy 2019-07-25 14:24 评论0 收藏0
Vue-项目从本地搭建到线上部署（wǒ shì biaō tí dǎng）

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

Arno 2019-08-26 13:49 评论0 收藏0
Vue项目部署遇到的问题及解决方案

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

姘搁『 2019-08-23 14:38 评论0 收藏0