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目录下可以写html\dist
            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代理访问，如此也方便了后续部署到服务器。