CDN文档

用户系统界面开发

如果你需要在我们提供的用户系统前端源码基础上开发自己的页面，可以在 https://github.com/tjbrains/CloudUserFront 获得用户系统前端源码。

项目初始化

使用以下命令初始化项目： 

npm install

开发

主要技术栈

前端技术栈主要有：

目录结构

所有门户资源均在 src/ 目录下： 

assets/      - 静态资源
components/  - 组件
configs/     - 配置
langs/       - 多语言
layouts/     - 布局组件
lib/         - 公共库
router/      - 路由设置
utils/       - 当前项目公用库
views/       - 页面文件
   portal/   - 门户页面（特殊）

门户页新增页面

门户页（/portal）如果要新增一个HTML文件，比如src/portal/test.html，你需要在 vite.config.js 中将此文件加入到 input 文件列表中： 

	build: {
		rollupOptions: {
			input: [
			    ...
			    
				/** portal **/
				'@/views/portal/index.html',
				'@/views/portal/post.html',
				'@/views/portal/products/index.html',
				'@/views/portal/products/cdn/index.html',
				'@/views/portal/test.html'              -- 我们新加的页面
			],
	...

门户页URL映射

门户页（/portal）比较特殊，当访问URL /page时，系统会尝试查找以下两个不同的路径： 

portal/page.html
portal/page/index.html
所以，如果你的页面是 /portal/page/index.html ，那么直接用 /portal/page 访问即可，而不需要 /portal/page/index。

实时开发测试

使用以下命令启用测试所需的服务： 

npm run dev

会出现类似于以下的提示： 

 VITE v5.3.5  ready in 130 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

然后通过用户系统下的命令设置前端开发地址： 

cloud-user devfront --url=http://localhost:5174/
其中 http://localhost:5174/ 换成你实际启动的 npm 服务地址，前提是要保证用户系统可以直接访问npm启动的服务。

命令执行成功后，就可以直接通过用户系统直接访问你的前端页面了。

要想取消实时开发测试模式，直接重启 cloud-user 进程即可： 

cloud-user restart

编译

使用以下命令编译项目： 

npm run build
编译后的所有资源在项目根目录下的 dist/ 目录中，如果此目录不存在，请先创建再编译项目。

部署

将编译后的 dist/ 下的文件拷贝到 cloud-user/web/views/@default/ 目录下： 

web/
  views/
    @default/
      account/
      assets/
      email/
      index/
      login/
      portal/
      register/
      layout.html

然后重启 cloud-user 进程： 

cloud-user restart
然后即可访问。

本文索引