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

Posted 2023-02-23

【中文标题】Vue CLI 3 vue.config.js 编译“未知单词”错误

【英文标题】：Vue CLI 3 vue.config.js compilation "Unknown word" error

【发布时间】：2019-04-08 21:30:54

【问题描述】：

尝试使用集成 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>

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

如往常一样，我们将不胜感激！

【问题讨论】：

在其他*.vue文件中添加<style>标签是否也会出现同样的错误？

【参考方案1】：

有趣的是，我从 webpack 模块规则中删除了以下内容，对于我使用 Cesium 的用例来说，所有内容似乎都可以正常工作。

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