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

介绍

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

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

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

以下为vue3, vue-router4.x 基于vite构建下的配置

vite下配置二级路径

url 对应打开路由
http://www.flytree.can/web/login /login
http://www.flytree.can/web/welcom /welcom
  1. vue-router 中要配置base
    createWebHistory() 中有可选参数 base 支持配置：
    // router.js
const router = createRouter({
	history: createWebHistory("/web/"),
	routes: constantRoutes,
});
  2. vite 构建增配置 base
    // vite.config.js
export default defineConfig(({ mode, command }) => {
	return {
		base:'/web/',
	}
	...
})
  3. nginx 配置
    location /web {
   alias /home/foo/workspace/xpos/web/;
   try_files $uri $uri/ /web/index.html;
}

以下为vue2, vue-router3.x 基于 webpack 下的配置，更新于2021-07-17 02:01

一级路径的配置

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

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  会飞的一棵树  阅读(8361)  评论(0)  编辑  收藏  举报