Vue CLI 3 vue.config.js 编译 "Unknown word" 错误
Vue CLI 3 vue.config.js compilation "Unknown word" error
尝试启动并 运行 一个集成了 Cesium 的 Vue CLI 3 应用程序,但是 运行 似乎是 webpack 配置问题。设置非常简单,所以我绞尽脑汁想为什么它会失败...
我收到的错误是当 webpack 试图 build/compile 时。错误是:
error in
./src/components/cesium-map.vue?vue&type=style&index=0&lang=css&
Syntax Error: Syntax Error
(5:1) Unknown Word
// load the styles var content =
require("!!../../node_modules/css-loader/index.js...
如果我从 CesiumMap 组件中删除 <style />
块,则应用 builds/compiles 并运行。
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)
}
}
}
}
}
一如既往,我们将不胜感激!
有趣的是,我从 webpack 模块规则中删除了以下内容,对于我使用 Cesium 的用例,所有内容似乎都正常工作。
{
test: /\.css$/,
use: {
!isProd ? 'vue-style-loader' : miniCssExtractPlugin.loader,
'css-loader
}
}
尝试启动并 运行 一个集成了 Cesium 的 Vue CLI 3 应用程序,但是 运行 似乎是 webpack 配置问题。设置非常简单,所以我绞尽脑汁想为什么它会失败...
我收到的错误是当 webpack 试图 build/compile 时。错误是:
error in ./src/components/cesium-map.vue?vue&type=style&index=0&lang=css&
Syntax Error: Syntax Error
(5:1) Unknown Word
// load the styles var content = require("!!../../node_modules/css-loader/index.js...
如果我从 CesiumMap 组件中删除 <style />
块,则应用 builds/compiles 并运行。
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)
}
}
}
}
}
一如既往,我们将不胜感激!
有趣的是,我从 webpack 模块规则中删除了以下内容,对于我使用 Cesium 的用例,所有内容似乎都正常工作。
{
test: /\.css$/,
use: {
!isProd ? 'vue-style-loader' : miniCssExtractPlugin.loader,
'css-loader
}
}