使用语言与工具

后端 golang,框架goframe,应用具体框架gfeasy 前端 vue3,打包工具vite,后端具体权限框架cool-admin,UI框架elementUI-plus,语言typescript(ts) 服务器 caddy,也可以是nginx

具体实现

目的是搭建一个权限后台框架,最终要部署到具体域名下,开发时候用开发模式.

  • vite打包以后非常大的单文件js,所以我们要分包处理.
  • 代理设置
	server: {
			host:"0.0.0.0",
			port: 8000,
			hmr: {
				overlay: true
			},
			proxy: {
				"/": {
					target: "http://127.0.0.1:8887",
					changeOrigin: true,
				},
			}
		},
build: {
			sourcemap: false,
			outDir:"../public",
			polyfillDynamicImport: false, // 必须为false
			rollupOptions:{
				output:{
					manualChunks(id){ // 分包
						if(id.includes('node_modules')){
							return id.toString().split('node_modules/')[1].split('/')[0].toString();
						}
					}
				}
			}
		}

上面代码是服务器设置和打包. 用yarn dev是开发模式,此时访问地址是127.0.0.1:8000去访问,开发完成以后用yarn build打包,这时候是127.0.0.1:8887去访问 ,我们把打包目录放在了go项目里面public,并且public是静态文件目路,这样到时候域名直接绑定到127.0.0.1:8887上边即可. 就实现了域名访问,如果是caddy非常简单. 打包以后容易出现一刷新就访问不到情况,这是因为vite默认是history模式,所以必须改成hash模式就正常了. vite打包后文件很大,上边代码可以实现分包处理.

  • vite问题 第一次安装以后出现,Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.这样一个错误, 很久都没解决,网上找了好久只有一个人说的可以,就是修改windows注册表,linux无此问题, 解决方法 只需要redegit命令打开注册表，查看HKEY_CLASSES_ROOT->.js，发现里面有一个Content-Type的配置, text/plain改成application/javascript,然后重启本地服务器即可正常

还有一个问题是开发模式也就是vite dev正常,打包vite build命令以后,放到域名下面是访问不到后端接口的,直接报错404 ,说明路由是不正确的,因为我们使用了go语言,它自带静态服务器,不用第三方服务器也行,我们直接把打包文件放到public下面 然后去访问,发现正常了,因为此时静态html和后端实际上走的都是同一个端口. 试过之后就正常了,但是只要一刷新,发现有报错404,这时候明显知道是vue路由模式错了,默认情况下history,看着很干净,但是不能正常用,所以必须用hash模式.

至于绑定域名,因为已经用了go,静态文件并不需要放到nginx下面了,如果要这么做也可以,那就要在nginx里面配置代理后端模式了 .我自己用的caddy所以直接转发以下即可.nging是caddy图形化界面服务器,只是包了个皮,直接鼠标操作.

总之这一套下面,又学了不少关于vue3知识,ts知识,打包vite的使用. 后台框架cool-admin是综上上边知识的不错框架.gfeasy是整合了cool-admin和goframe的,因为官方只支持java和nodejs后端, gfeasy整合了golang语言 个人经过增加功能.后面打算把这一套整个开源出来 解决方法 只需要redegit命令打开注册表，查看HKEY_CLASSES_ROOT->.js，发现里面有一个Content-Type的配置, text/plain改成application/javascript,然后重启本地服务器即可正常

还有一个问题是开发模式也就是vite dev正常,打包vite build命令以后,放到域名下面是访问不到后端接口的,直接报错404 ,说明路由是不正确的,因为我们使用了go语言,它自带静态服务器,不用第三方服务器也行,我们直接把打包文件放到public下面 然后去访问,发现正常了,因为此时静态html和后端实际上走的都是同一个端口. 试过之后就正常了,但是只要一刷新,发现有报错404,这时候明显知道是vue路由模式错了,默认情况下history,看着很干净,但是不能正常用,所以必须用hash模式.

至于绑定域名,因为已经用了go,静态文件并不需要放到nginx下面了,如果要这么做也可以,那就要在nginx里面配置代理后端模式了 .我自己用的caddy所以直接转发以下即可.nging是caddy图形化界面服务器,只是包了个皮,直接鼠标操作.

总之这一套下面,又学了不少关于vue3知识,ts知识,打包vite的使用. 后台框架cool-admin是综上上边知识的不错框架.gfeasy是整合了cool-admin和goframe的,因为官方只支持java和nodejs后端, gfeasy整合了golang语言 个人经过增加功能.后面打算把这一套整个开源出来. 解决方法 只需要redegit命令打开注册表，查看HKEY_CLASSES_ROOT->.js，发现里面有一个Content-Type的配置, text/plain改成application/javascript,然后重启本地服务器即可正常

还有一个问题是开发模式也就是vite dev正常,打包vite build命令以后,放到域名下面是访问不到后端接口的,直接报错404 ,说明路由是不正确的,因为我们使用了go语言,它自带静态服务器,不用第三方服务器也行,我们直接把打包文件放到public下面 然后去访问,发现正常了,因为此时静态html和后端实际上走的都是同一个端口. 试过之后就正常了,但是只要一刷新,发现有报错404,这时候明显知道是vue路由模式错了,默认情况下history,看着很干净,但是不能正常用,所以必须用hash模式.

至于绑定域名,因为已经用了go,静态文件并不需要放到nginx下面了,如果要这么做也可以,那就要在nginx里面配置代理后端模式了 .我自己用的caddy所以直接转发以下即可.nging是caddy图形化界面服务器,只是包了个皮,直接鼠标操作.

总之这一套下面,又学了不少关于vue3知识,ts知识,打包vite的使用. 后台框架cool-admin是综上上边知识的不错框架.gfeasy是整合了cool-admin和goframe的,因为官方只支持java和nodejs后端, gfeasy整合了golang语言 个人经过增加功能.后面打算把这一套整个开源出来..