Skip to content

Commit 5238585

Browse files
wewindywewindy
committed
feat: init page
1 parent 6ec7cfd commit 5238585

17 files changed

+248
-1
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"typescript.tsdk": "node_modules/typescript/lib"
3+
}

‎pages/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎pages/.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock=false

‎pages/.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"typescript.tsdk": "node_modules/typescript/lib"
3+
}

‎pages/env/.env.development

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_CESIUM_BASE_URL = libs/cesium/

‎pages/env/.env.production

Whitespace-only changes.

‎pages/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-Hans">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="icon" type="image/jpg" href="/icon.jpg" />
9+
<title>Demo</title>
10+
</head>
11+
12+
<body>
13+
<div id="app"></div>
14+
<script type="module" src="/src/index.ts"></script>
15+
</body>
16+
17+
</html>

‎pages/package.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "pages",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vue-tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"keywords": [],
12+
"author": "",
13+
"license": "ISC",
14+
"dependencies": {
15+
"cesium": "1.104",
16+
"vue": "3.2"
17+
},
18+
"devDependencies": {
19+
"@vitejs/plugin-vue": "^4.1.0",
20+
"typescript": "^5.0.4",
21+
"vite": "^4.2.1",
22+
"vite-plugin-compression": "^0.5.1",
23+
"vite-plugin-externals": "^0.6.2",
24+
"vite-plugin-insert-html": "^1.0.1",
25+
"vite-plugin-static-copy": "^0.13.1",
26+
"vue-tsc": "^1.2.0"
27+
}
28+
}

‎pages/public/icon.jpg

4.07 KB
Loading

‎pages/src/App.vue

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup lang="ts">
2+
import { onMounted, ref } from 'vue'
3+
import { TileMapServiceImageryProvider, Viewer, buildModuleUrl } from 'cesium'
4+
import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
5+
6+
const viewerDivRef = ref<HTMLDivElement>()
7+
let viewer: Viewer | null = null
8+
const sysBaseUrl = import.meta.env.BASE_URL
9+
const mode = import.meta.env.MODE
10+
const sourceCesiumBaseUrl = import.meta.env.VITE_CESIUM_BASE_URL
11+
12+
// 在不同的 base 路径下（vite.config.ts 中的 base 配置
13+
// 尤其是开发模式用的是拷贝来的 CesiumJS 库文件，最好拼接上 base 路径
14+
// 生产模式使用 CDN 则不用拼接 base 路径
15+
const cesiumBaseUrl = mode === 'development' ? `${sysBaseUrl}${sourceCesiumBaseUrl}` : sourceCesiumBaseUrl
16+
window.CESIUM_BASE_URL = cesiumBaseUrl
17+
18+
console.log(`模式: ${mode}, CESIUM_BASE_URL: ${cesiumBaseUrl}`)
19+
20+
onMounted(() => {
21+
viewer = new Viewer(viewerDivRef.value as HTMLElement, {
22+
imageryProvider: new TileMapServiceImageryProvider({
23+
// 对于 CESIUM_BASE_URL 下的静态资源，推荐用 buildModuleUrl 获取
24+
url: buildModuleUrl('Assets/Textures/NaturalEarthII'),
25+
})
26+
})
27+
console.log(viewer)
28+
})
29+
</script>
30+
31+
<template>
32+
<div id="cesium-viewer" ref="viewerDivRef"></div>
33+
</template>
34+
35+
<style scoped>
36+
#cesium-viewer {
37+
width: 100%;
38+
height: 100%;
39+
}
40+
</style>

‎pages/src/index.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { createApp } from 'vue'
2+
import App from '@/App.vue'
3+
4+
import './style.css'
5+
6+
declare global {
7+
interface Window {
8+
CESIUM_BASE_URL: string
9+
}
10+
}
11+
12+
createApp(App).mount('#app')

‎pages/src/style.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
html, body {
2+
padding: 0;
3+
margin: 0;
4+
}
5+
6+
#app {
7+
height: 100vh;
8+
width: 100vw;
9+
}

‎pages/tsconfig.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ESNext",
4+
"useDefineForClassFields": true,
5+
"module": "ESNext",
6+
"moduleResolution": "Node",
7+
"strict": true,
8+
"jsx": "preserve",
9+
"resolveJsonModule": true,
10+
"isolatedModules": true,
11+
"esModuleInterop": true,
12+
"lib": [
13+
"ESNext",
14+
"DOM"
15+
],
16+
"skipLibCheck": true,
17+
"noEmit": true,
18+
"paths": {
19+
"@/*": [
20+
"./src/*"
21+
]
22+
}
23+
},
24+
"include": [
25+
"src/**/*.ts",
26+
"src/**/*.d.ts",
27+
"src/**/*.tsx",
28+
"src/**/*.vue",
29+
"types/**/*.d.ts"
30+
],
31+
"references": [
32+
{
33+
"path": "./tsconfig.node.json"
34+
}
35+
]
36+
}

‎pages/tsconfig.node.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"compilerOptions": {
3+
"composite": true,
4+
"module": "ESNext",
5+
"moduleResolution": "Node",
6+
"allowSyntheticDefaultImports": true,
7+
},
8+
"include": [
9+
"vite.config.ts"
10+
]
11+
}

‎pages/types/vue-env.d.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/// <reference types="vite/client" />
2+
3+
interface ImportMetaEnv {
4+
readonly PROD: boolean
5+
readonly VITE_CESIUM_BASE_URL: string
6+
// 更多环境变量...
7+
}
8+
9+
interface ImportMeta {
10+
readonly env: ImportMetaEnv
11+
}

‎pages/vite.config.ts

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { type PluginOption, defineConfig, splitVendorChunkPlugin, loadEnv } from 'vite'
2+
import { join } from "node:path"
3+
import vue from '@vitejs/plugin-vue'
4+
import { viteExternalsPlugin } from 'vite-plugin-externals'
5+
import { insertHtml, h } from 'vite-plugin-insert-html'
6+
import { viteStaticCopy } from 'vite-plugin-static-copy'
7+
import compress from 'vite-plugin-compression'
8+
9+
export default defineConfig((context) => {
10+
const mode = context.mode
11+
const envDir = 'env'
12+
const env = loadEnv(mode, envDir)
13+
const base = '/'
14+
const cesiumBaseUrl = env['VITE_CESIUM_BASE_URL']
15+
const isProd = mode === 'production'
16+
17+
const plugins: PluginOption[] = [
18+
vue(),
19+
splitVendorChunkPlugin(),
20+
viteExternalsPlugin({
21+
cesium: 'Cesium',
22+
}),
23+
insertHtml({
24+
head: [
25+
h('script', {
26+
src: isProd ? `${cesiumBaseUrl}Cesium.js` : `${base}${cesiumBaseUrl}Cesium.js`
27+
})
28+
]
29+
}),
30+
]
31+
if (!isProd) {
32+
// 开发模式，复制 node_modules 下的 cesium 依赖
33+
const cesiumLibraryRoot = 'node_modules/cesium/Build/CesiumUnminified/'
34+
const cesiumLibraryCopyToRootPath = 'libs/cesium/' // 相对于打包后的路径
35+
const cesiumStaticSourceCopyOptions = ['Assets', 'ThirdParty', 'Workers', 'Widgets'].map((dirName) => {
36+
return {
37+
src: `${cesiumLibraryRoot}${dirName}/*`,
38+
dest: `${cesiumLibraryCopyToRootPath}${dirName}`
39+
}
40+
})
41+
plugins.push(
42+
viteStaticCopy({
43+
targets: [
44+
{
45+
src: `${cesiumLibraryRoot}Cesium.js`,
46+
dest: cesiumLibraryCopyToRootPath
47+
},
48+
...cesiumStaticSourceCopyOptions
49+
]
50+
}),
51+
)
52+
}
53+
plugins.push(compress({
54+
threshold: 10 * 1024 // 10KB 以下不压缩
55+
}))
56+
57+
console.log(env)
58+
59+
return {
60+
plugins,
61+
envDir,
62+
base,
63+
build: {
64+
chunkSizeWarningLimit: 1024 * 1024,
65+
reportCompressedSize: false,
66+
},
67+
resolve: {
68+
alias: {
69+
'@': join(__dirname, "src")
70+
}
71+
}
72+
}
73+
})

‎pnpm-workspace.yaml

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
packages:
2-
- 'packages/*'
2+
- 'packages/*'
3+
- 'pages'

0 commit comments

Comments
 (0)