Vue CLI 3 vue.config.js编译“未知字”错误

Question

尝试使用集成了Cesium的Vue CLI 3应用启动并运行，但正在遇到似乎是webpack配置问题的问题。设置非常简单，所以我不停地思考为什么会失败...

我收到的错误是当webpack试图构建/编译时。错误是：

  

错误   ./src/components/cesium-map.vue?vue&type=style&index=0&lang=css＆

     

语法错误：语法错误

     

（5：1）未知单词

     

//加载样式var content =   require（“ !! ../../ node_modules / css-loader / index.js ...

如果我从CesiumMap组件中删除了<style />块，则该应用程序将构建/编译并运行。

App.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>

铯-map.vue（组件）

<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)
                }
            }
        }
    }
}

一如既往，任何帮助将不胜感激！

Answer 1

有趣的是，我从webpack模块规则中删除了以下内容，并且所有这些在我使用Cesium的用例中似乎都可以正常工作。

{
    test: /\.css$/,
        use: {
            !isProd ? 'vue-style-loader' : miniCssExtractPlugin.loader,
        'css-loader
    }
}