nginx部署使用history模式的vue项目详细配置【可多级目录】

介绍

本文是篇详细的介绍vue项目在history模式下发布时build,项目如何配置,nginx如何配置,才能正常的使用历史模式。或者在二级目录下,多级路径下也能正常使用历史模式。

本文的例子中假设,nginx全部都是配置在 flytree.can 域名下。
且路由中配置有以下路径:

const routes = [
  { path: '/', redirect: "/index"},
  { path: '/login', component: Login },
  { path: '/welcome', component: Welcome }
]

一级路径的配置

应用放在服务器根目录下。路由也就是域名后的第一级路径。如:

url 对应打开路由
http://www.flytree.can/login /login
http://www.flytree.can/welcom /welcom

路由配置

const router = new VueRouter({
  mode: 'history',
  routes
})

nginx配置

location / {
  try_files $uri $uri/ /index.html;
}

二级路径的配置

应用不是放在服务器根目录下,而是location有上下文的。如配置了web上下文,则:

url 对应打开路由
http://www.flytree.can/web/login /login
http://www.flytree.can/web/welcom /welcom

路由配置

如果在ngnix代理的时候不是配置到根路径/的话,则要配置base,它指定的是应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"
router/index.js配置:

const vueRouter = new Router({
    mode: "history",
    base: "/web",
    routes: routes
})

配置了base后,应用就会在base之后打开了,如,后面配置了个/login路由,则是在/web/login中打开此路由。

项目config配置

注:由于项目里使用的是老版本的vue-cli,新版本@vue/cli配置会在旁说明。

老版本的配置文件在config/index.js中,如果是cli 3.x后续版本,需在项目 (和 package.json 同级的) 根目录中创建vue.config.js文件进行配置。

const path = require('path');
module.exports = {
    module.exports = {
        build: {
            // 指定生成的 index.html 的输出路径 (相对于 配置文件所在路径)。也可以是一个绝对路径。
            // 新版本使用:indexPath
            index: path.resolve(__dirname, '../web/index.html'),
            // 指定生成的 资源 的输出的目录 (相对于 配置文件所在路径)。此,build后到dist目录下。注意目标目录在构建之前会被清除。
            // 新版本使用:outputDir
            assetsRoot: path.resolve(__dirname, '../web'),
            // 指定除了index.html外的静态资源的目录
            // 新版本使用:assetsDir
            assetsSubDirectory: 'public',
            // 部署应用包时的基本 URL。指定打包后,index.html里面引用资源的的相对地址。
            // 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径
            // 如我在index.html中应用了张在pulblic下的图片flytree.jpg
            // 则引用是 src='./public/flytree.jpg'
            // 新版本:publicPath
            assetsPublicPath: '/web/',
        }
    }
}

配置以后bulid后,部署的文件会在项目下web文件下。

外部文件应用配置

如配置了assetsPublicPath路径,如这里配置的是./相对路径,则在发布的时候要将引用的静态资源设置在,其路径里,如:

<img src="./public/img/flytree.png">

<script>
    axios.get('./public/JSON/data.json')
</script>

为了方便开发和发布时使用静态资源,可以:

// main.js中配置
window.base_file_url =
process.env.NODE_ENV === 'production' ? '.' : ''
// 使用
axios.get(base_file_url + '/public/JSON/data.json')

nginx的配置

location /web {
    alias F:/Program_D/work/demo/web/;
    try_files  $uri $uri/ /web/index.html;
}

如此,项目就部署在http://www.flytree.cam/web下了。

多级路径的配置

可能会有人说,谁TM竟然要这么麻烦,搞这么多级路径干啥。但事实就是还真能遇到就要配这么多级的路径。要不然就不会有本文了。😂

router配置

注:这里base可以配置多级路径,比如:

const vueRouter = new Router({
    mode: "history",
    base: "/app/web",
    routes
})

那么,当前应用将部署在/app/web下:

url 对应打开路由
http://www.flytree.can/app/web/login /login
http://www.flytree.can/app/web/welcom /welcom
若要配置多级路径,其它的配置也要作修改,

项目config配置

配置后,build后会生成一个有层级的文件夹。

const path = require('path');
module.exports = {
    module.exports = {
        build: {
            // 指定生成的 index.html 的输出路径 (相对于 配置文件所在路径)。也可以是一个绝对路径。
            // 新版本使用:indexPath
            index: path.resolve(__dirname, '../app/web/index.html'),
            // 指定生成的 资源 的输出的目录 (相对于 配置文件所在路径)。此,build后到dist目录下。注意目标目录在构建之前会被清除。
            // 新版本使用:outputDir
            assetsRoot: path.resolve(__dirname, '../app/web'),
            // 指定除了index.html外的静态资源的目录
            // 新版本使用:assetsDir
            assetsSubDirectory: 'public',
            // 部署应用包时的基本 URL。指定打包后,index.html里面引用资源的的相对地址。
            // 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径
            // 如我在index.html中应用了张在pulblic下的图片flytree.jpg
            // 则引用是 src='./public/flytree.jpg'
            // 新版本:publicPath
            assetsPublicPath: '/app/web/',
        }
    }
}

nginx配置

 location /app/web/ {
    # alias F:/Program_D/work/demo/app/web/;
    root F:/Program_D/work/demo/;
    try_files  $uri $uri/ /app/web/index.html;
}

原理分析

就拿这个多级的举例吧。

url 对应打开路由
http://www.flytree.can/app/web/login /login
http://www.flytree.can/app/web/welcom /welcom

当访问 http://www.flytree.can/app/web/login 时,

  1. nginx 配置了上下文 /app/web/。所以$uri的值是/login
  2. try_files 会将此路径,响应为 root + /app/web/index.html
  3. 浏览器打开了index.html也就是history模式的vue项目,此时vue-router匹配路由/login,将此路由内容插入到index.html中。

补充说明

nginx配置的一些说明

  1. 关于 try_files
try_files  $uri $uri/ /index.html;

这个命令可以将其后的参数,响应到最后一个参数的路径中去。在这里通俗来说,就是匹配到啥$uri我都给你响应index.html。前提是有index.html,否则会响应到别的location配置中去(有的话),或404。

  1. root 和 alias 的区别
    首先这两玩意都是指定服务器的响应文件路径的。
  • 使用root配置时,则配置到 项目路径的上层路径。此时,nginx会去读取的文件路径是,root + location的上下文(其后面跟着的)拼成的路径。
  • alias 就配置到项目的完整的路径,配置到index这一级。nginx会去读取的文件路径时就会按照alias指定的路径读取。

参考内容

  1. 关于 try_files $uri $uri/ /index.html的说明:
    Niginx中Vue Router 历史(history)模式的配置
  2. vue-router history模式在nginx二级目录下的配置
posted @ 2021-07-17 02:01  会飞的一棵树  阅读(2052)  评论(0编辑  收藏  举报