vite vue3动态路由的引入与打包

一、动态路由的引入

在本地环境中，可使用（）=>import 的方式进行动态导入，其中 import 内的文件路径可以使用相对地址和变量进行动态拼接，如：

routes.push({path: `/admin${item.path}`,
                name: item.name,
                meta: {title: item.title},
                component: () => import(/*@vite-ignore*/"../views"+item.path+"/index.vue")
            })

这样的话在开发环境中运行没有问题，可以正常引入文件，也可以访问路由，但是将项目打包成 dist 文件夹之后就会出现问题。

二、项目的打包及本地 Nginx 配置

现在我们保持上面的写法，使用 npm run build 命令打包，会得到一个 dist 文件夹，然后将项目配置到本地的 nginx 上。

dist 文件夹结构

nginx.conf 文件配置

worker_processes  1;

events {worker_connections  1024;}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;

	server{
        # 监听的端口
		listen       80;
        # 这里写服务器 ip，本地所以写 localhost
        server_name  localhost;

		location / {

            # 这里写 dist 文件夹存放的地址, 或者如果将 dist 放在 nginx 的 html 目录下可以写 htmldist
            root D:dist;

            index index.html index.htm;

            # 这里是为了防止路由使用历史模式时刷新跳 404 页面的问题
            try_files $uri $uri/ /index.html;
        }

        # 这个 api 是指要监听的前端发送请求 url 的前缀，加 ^~ 是为了转发请求的时候在请求 url 中去掉 /api
        location ^~/api/ {
            # 这里写后端的 ip 和端口
            proxy_pass http://localhost:7070/;

            # 这些是为了后端能获得访问者的真实 ip
            proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            # 这些可写可不写，这里不需要
            # proxy_set_header Host $host;
            # proxy_set_header X-Real-IP $remote_addr;
            # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            # proxy_set_header X-Forwarded-Proto $scheme;
        }
	}
}

生产环境中请求路径的写法是这样的‘

// request.js

// 创建一个新的 axios 对象
const request=axios.create({

    baseURL:"/api", // 代理的 ip 地址

    timeout:6000 // 响应时间
})

// vite.config.js

  server:{
    host: "0.0.0.0", // ip
    port: 5100,  // 端口号
    open: false,  // 是否自动在浏览器打开
    https: false, // 是否开启 http
    // 跨域代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:7070',
        changeOrigin: true,
        rewrite: path => path.replace(/^/api/, '')
      }
    }
  },

 然后运行 nginx.exe，并且在浏览器中输入网址 localhost:80 来访问我们的项目

但是这时当我们访问动态导入的路由时会出现这样的错误

我们可以在开发者工具的网络中看到同步请求，它请求的是一个 vue 文件而不是单页面下的 js 文件，因此我们选择使用官方推荐的 import.meta.glob 引入动态文件来解决这个问题。

三、使用 import.meta.glob 动态引入文件解决问题

现在我们修改原来动态引入文件的代码

const modules=import.meta.glob("../views/**/**.vue")

routes.push({path: `/admin${item.path}`,
                name: item.name,
                meta: {title: item.title},
                //component: () => import(/*@vite-ignore*/"../views"+item.path+"/index.vue")
                component: modules[/*@vite-ignore*/`../views${item.path}/index.vue`]
            })

 import.meta.glob(“../views/**/**.vue”) 里的路径根据项目的相对路径来决定，如这个路径下的项目结构为

然后输出一下 modules，可以看到一层结构和二层结构的.vue 文件都导进去了

然后再打包成 dist 文件夹，此时我们发现 dist 文件夹中的 assets 文件夹中多了许多文件

nginx.conf 的 root 路径匹配上，其余设置不动，就可以正常动态引入并访问了，并且此时我们再看同步请求，请求的是 js，css 等文件

如此，vite+vue3 动态引入路由的打包问题便解决了，并且可以成功通过 nginx 代理访问，如此也方便了后续部署到服务器。