NutUI内网离线部署

news2025/4/17 20:02:34

文章目录

- 官网拉取源代码到本地仓库
- 修改源代码
- 打包构建
- nginx反向代理部署
- 访问内网离线地址

在网上找了一圈没有写NutUI内网离线部署的文档，花了1天时间研究下，终于解决了。
对于有在内网离线使用的小伙伴就可以参考使用了
如果还是不会联系UP主:QQ:1092705638

官网拉取源代码到本地仓库

giteeNutUI的开源代码

修改源代码

doc项目的index.vue文件将这里的前缀全部改成跟我一样，它默认的不对

在这里插入图片描述

const watchDemoUrl = (router: RouteLocationNormalized) => {
  RefData.getInstance().currentRoute.value = router.path as string
  if (isTaro(router)) {
    data.demoUrl = `/uinut/demo.html/#/${
      state.componentName.type
    }/pages/${state.componentName.name.toLowerCase()}/index`
  } else {
    if (router.path.includes('zh-CN')) {
      data.demoUrl = `/uinut/demo.html#/zh-CN/${state.componentName.name.toLowerCase()}`
    } else {
      data.demoUrl = `/uinut/demo.html#/en-US/${state.componentName.name.toLowerCase()}`
    }
  }
}

打包构建

下载下来会发现是双入口的项目，就是文档和demo是两个项目，文档项目嵌入了demo项目，也是费了好大劲解决的

vite.config.ts文件
在这里插入图片描述

会将两个项目打包到一个文件里如图，两个html文件的js和资源都在deemo-4.3.13里面

在这里插入图片描述增加一个打包脚本

nginx反向代理部署

nginx.conf配置

 server {
        listen       2016;
        server_name  localhost;

     #文档
    location /docnut/ {
        alias "D:/soft/SoftProject/nutui/dist/h5/vue/4x/";  
        index  index.html;
        try_files $uri $uri/   /nutdoc/index.html;
    }
	#demo
 	location /uinut/ {
        alias "D:/soft/SoftProject/nutui/dist/h5/vue/4x/"; 
   		index demo.html;  
    	try_files $uri $uri/ /uinut/demo.html;  
    }