vue3+cesium完整的实现及config配置
一、创建vue3项目官网参照Vue CLIhttps://cli.vuejs.org/zh/二、安装cesiumnpm i cesium --save本人做vue3是从vue2项目成果迁移升级直接拿的package.json命令npm i 安装{"name": "cesiumvue3","version": "0.1.0","private": true,"scripts": {"serve":
·
一、创建vue3项目官网参照
Vue CLIhttps://cli.vuejs.org/zh/
二、安装cesium
npm i cesium --save
本人做vue3是从vue2项目成果迁移升级直接拿的package.json命令npm i 安装
{ "name": "cesiumvue3", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "lint": "vue-cli-service lint" }, "dependencies": { "axios": "^0.19.2", "cesium": "^1.91.0", "core-js": "^3.8.3", "element-plus": "^2.1.4", "jquery": "^3.6.0", "screenfull": "^5.0.0", "vue": "^3.2.13", "vue-router": "^4.0.3", "vuex": "^4.0.0" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@open-wc/webpack-import-meta-loader": "^0.4.7", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-unit-jest": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-service": "~5.0.0", "@vue/test-utils": "^2.0.0-0", "@vue/vue3-jest": "^27.0.0-alpha.1", "babel-jest": "^27.0.6", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", "jest": "^27.0.5", "less": "^4.0.0", "less-loader": "^8.0.0", "node-sass": "^4.14.1", "sass-loader": "^10.1.0" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/vue3-essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": {}, "overrides": [ { "files": [ "**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)" ], "env": { "jest": true } } ] }, "browserslist": [ "> 1%", "last 2 versions", "not dead", "not ie 11" ], "jest": { "preset": "@vue/cli-plugin-unit-jest" } }
三、vue.config.js配置
注意CopyWebpackPlugin的版本本次迁移安装用的是9.0.1
下面标红部分根据自己的版本传编译参数
const { defineConfig } = require('@vue/cli-service')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
let cesiumSource = './node_modules/cesium/Source'
module.exports = defineConfig({
transpileDependencies: true,
publicPath: './',
outputDir: "dist", // 输出文件目录
lintOnSave: false, // eslint 是否在保存时检查
assetsDir: 'static', // 配置js、css静态资源二级目录的位置
devServer: {
proxy: {
'/cnterrain20':{
target:'http://10.0.200.201:8083'
}
}
},
configureWebpack: {
output: {
sourcePrefix: ' '
},
amd: {
toUrlUndefined: true
},
resolve: {
alias: {
'@': path.resolve('src'),
'cesium': path.resolve(__dirname, cesiumSource)
}
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: path.join(cesiumSource, 'Workers'), to: 'Workers' },
{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' },
],
}),
// 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({
CESIUM_BASE_URL: JSON.stringify('./')
})
],
module: {
rules: [
{
test: /\.js$/,
use: {
loader: '@open-wc/webpack-import-meta-loader',
},
},
]
},
}
})
vue2中的配置参照
VUE+Cesium创建地球(ThirdPartyzip.js问题解决)_⊙∀⊙!哦我的天哪的博客-CSDN博客
cesium架构搭建参照
cesium在vue中进行架构设计与实现_兴诚的博客-CSDN博客_vue设计架构
四、项目结构
五、启动效果
如果对您有帮助
感谢支持技术分享,请扫码点赞支持:
技术合作交流qq:2401315930
更多推荐
已为社区贡献5条内容
所有评论(0)