Vue3配置Cesium
0. 说明基于Vue3配置Cesium,软件版本如下。node@14.17.3npm@8.4.1vue/cli@4.5.151. 创建 Vue 项目安装 Vue CLIE:\CesiumProject> npm install -g @vue/cli创建项目,选项如下,选择 Manually select featuresE:\CesiumProject> vue create wor
0. 说明
基于Vue3配置Cesium,软件版本如下。
node@14.17.3
npm@8.4.1
vue/cli@4.5.15
1. 创建 Vue 项目
安装 Vue CLI
E:\CesiumProject> npm install -g @vue/cli
创建项目,选项如下,选择 Manually select features
E:\CesiumProject> vue create world
? Your connection to the default yarn registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? Yes
Vue CLI v4.5.15
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features
使用上下键和空格选上 Router
和 Vuex
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
>(*) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
按如下配置
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: NPM
Vue CLI v4.5.15
✨ Creating project in E:\CesiumProject\world.
⚙️ Installing CLI plugins. This might take a while...
added 1282 packages in 23s
🚀 Invoking generators...
📦 Installing additional dependencies...
added 76 packages in 4s
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project world.
👉 Get started with the following commands:
$ cd world
$ npm run serve
Tips
通过图形界面方式创建 Vue 项目
E:\CesiumProject>vue ui
🚀 Starting GUI...
🌠 Ready on http://localhost:8000
2. 配置 Cesium
先进入项目目录
E:\CesiumProject>cd world
E:\CesiumProject\world>
安装 cesium
E:\CesiumProject\world> npm i cesium --save
配置 vue.config.js
,如果没有就在项目根目录创建一个。
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const cesiumSource = "./node_modules/cesium/Source";
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
devServer: {
port: 8080,
open: true,
proxy: {
//配置代理服务器来解决跨域问题
"/api": {
target: "http://localhost:80/api/", //配置要替换的后台接口地址
changOrigin: true, //配置允许改变Origin
pathRewrite: {
"^/api/": "/",
},
},
},
},
lintOnSave: false,
configureWebpack: {
output: {
sourcePrefix: " ", // 1 让webpack 正确处理多行字符串配置 amd参数
},
amd: {
// 2
toUrlUndefined: true, // webpack在cesium中能友好的使用require
},
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
//'vue$': 'vue/dist/vue.esm.js',
"@": path.resolve("src"),
components: path.resolve("src/components"),
assets: path.resolve("src/assets"),
views: path.resolve("src/views"),
cesium: path.resolve(__dirname, cesiumSource),
},
},
plugins: [
// 4
new CopyWebpackPlugin([
{ from: path.join(cesiumSource, "Workers"), to: "Workers" },
]),
new CopyWebpackPlugin([
{ from: path.join(cesiumSource, "Assets"), to: "Assets" },
]),
new CopyWebpackPlugin([
{ from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
]),
new CopyWebpackPlugin([
{
from: path.join(cesiumSource, "ThirdParty/Workers"),
to: "ThirdParty/Workers",
},
]),
new webpack.DefinePlugin({
// 5
CESIUM_BASE_URL: JSON.stringify("./"),
}),
],
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "@open-wc/webpack-import-meta-loader",
},
},
{
test: /\.(glb|gltf)?$/,
use: {
loader: "url-loader",
},
},
],
},
},
};
3. 安装一些必要的模块
-
webpack-import-meta-loader
E:\CesiumProject\world> npm install @open-wc/webpack-import-meta-loader --save-dev
-
node-sass
E:\CesiumProject\world> npm i node-sass@4.14.1 --save-dev
-
sass-loader
E:\CesiumProject\world> npm i sass-loader@10.1.0 --save-dev
Sass直接安装,会自动安装为最新版本,可能会导致项目无法启动,因此安装如上建议版本。
4. 测试 Cesium
在 sec/views/
下新建 Index.vue
,如下
<template>
<div id="container"></div>
</template>
<script>
import * as Cesium from "cesium/Cesium";
import * as widgets from "cesium/Widgets/widgets.css";
export default {
name: 'HelloCesium',
mounted () {
const viewer = new Cesium.Viewer('container');
}
}
</script>
<style scoped lang="scss">
#container {
width: 100%;
height: 100%;
}
</style>
在 src/router/index.js
中添加
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
/** 添加一个页面 **/
{
path: '/index',
name: 'Index',
component: () => import('../views/Index.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
启动项目
E:\Sweetyaya\CesiumProject\world>npm run serve
> world@0.1.0 serve
> vue-cli-service serve
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.xxx.xxx:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
访问 http://localhost:8080/index
如下。
5. 参考
参考了如下博客
[1]. 使用vue-cli创建项目
https://www.cnblogs.com/huoyz/p/14377735.html
[2]. cli.vuejs.org
https://cli.vuejs.org/zh/
[3]. VUE+Cesium创建地球(ThirdPartyzip.js问题解决)
https://blog.csdn.net/qq_44749616/article/details/120328371
[4]. 新建vue项目中无router文件夹,vue安装路由
https://blog.csdn.net/weixin_43871857/article/details/122545961
[5]. VUE笔记:Failed to resolve loader: sass-loader
https://www.cnblogs.com/chig/p/15364680.html
.
.
.
.
.
.
桃花仙人种桃树,又摘桃花换酒钱_
更多推荐
所有评论(0)