试图使用集成Cesium的Vue CLI 3应用程序启动并运行，但遇到了似乎是ebpack配置问题的问题。设置非常简单，所以我很难理解为什么会失败。。。
我收到的错误是当webpack试图构建/编译时。错误为：
中的错误./src/components/cesium-map.vue？vue&type=style&index＝0&lang=css&
语法错误：语法错误
(5:1(未知单词
//加载样式var内容=require("！！../../node_modules/css loader/index.js…
如果我从CesiumMap组件中删除<style />块，则应用程序将构建/编译并运行。
应用.vue
<script>
import CesiumMap from '@/components/cesium-map.vue'
export default {
name: 'app',
component: {
CesiumMap
}
}
</script>
<template>
<v-container id="app">
<v-app dark>
<CesiumMap />
</v-app>
</v-container>
</template>
铯(组分(
<script>
export default {
name: 'cesium-map',
}
</script>
<template>
<v-container id="cesium-map">
</v-container>
</template>
<style>
#cesium-map .cesium-viewer-bottom {
display: none;
}
</style>
vue.config.js
require('dotenv-flow').config();
const path = require('path');
const webpack = require('webpack');
const copyWebPackPlugin = require('copy-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const isProd = (process.env.NODE_ENV === 'production');
module.exports = {
configureWebpack: webpackConfig => {
let moduleRules = [
{
test: /.css$/,
use: {
!isProd ? 'vue-style-loader' : miniCssExtractPlugin.loader,
'css-loader
}
},
{
test: /.(png|gif|jpg|jpeg|svg|xml|json)$/,
use: ['url-loader']
}
];
if(isProd) {
moduleRules.push({
test: /.js$/,
enforce: 'pre',
include: path.resolve(__dirname, cesiumSource),
use: [{
loader: 'strip-pragma-loader',
options: {
pragma: {
debug: false
}
}
}]
})
}
return {
plugins: [
new miniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new webpack.ProvidePlugin({
'_': 'lodash',
'moment': 'moment',
'Promise': 'bluebird',
'cesium': path.resolve(__dirname, cesiumSource)
}),
new copyWebPackPlugin([{
from: path.join(cesiumSource, cesiumWorkers),
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'),
to: 'ThirdParty'
}]),
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('/')
})
],
module: {
rules: moduleRules
},
output: {
sourcePrefix: ''
},
amd: {
toUrlUndefined: true
},
resolve: {
mainFiles: ['index'],
extensions: ['.js', '.json', '.vue'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'cesium': path.resolve(__dirname, cesiumSource)
}
}
}
}
}
如有任何帮助，我们将不胜感激！
有趣的是，我从webpack模块规则中删除了以下内容，所有内容似乎都能正确地用于我的Cesium用例。
{
test: /.css$/,
use: {
!isProd ? 'vue-style-loader' : miniCssExtractPlugin.loader,
'css-loader
}
}