- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
加载 Vue.js 2 项目时,我在控制台中收到此错误消息
./src/components/UserSettings.vue
18:2-16 "export 'default' (imported as '__vue_script__') was not found in '!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0!./UserSettings.vue'
UserSettings.vue
是一个页面,不需要export default =
。这是./src/components/UserSettings.vue
<template>
<page-content page-title="My Settings">
<div class="main-content">
<md-headline>Notification Position</md-headline>
<div class="row">
<div class="box">
<label :class="{'active' : position == 'top-left' }" for="position-top-left" class="tile"> <input v-model="position" id="position-top-left" value="top-left" name="position" type="radio"/> </label>
<label :class="{'active' : position == 'top-center' }" for="position-top-center" class="tile"> <input v-model="position" id="position-top-center" value="top-center" name="position" type="radio"/> </label>
<label :class="{'active' : position == 'top-right' }" for="position-top-right" class="tile"> <input v-model="position" id="position-top-right" value="top-right" name="position" type="radio"/> </label>
<label :class="{'active' : position == 'bottom-left' }" for="position-bottom-left" class="tile"> <input v-model="position" id="position-bottom-left" value="bottom-left" name="position" type="radio"/> </label>
<label :class="{'active' : position == 'bottom-center' }" for="position-bottom-center" class="tile"> <input v-model="position" id="position-bottom-center" value="bottom-center" name="position" type="radio"/> </label>
<label :class="{'active' : position == 'bottom-right' }" for="position-bottom-right" class="tile"> <input v-model="position" id="position-bottom-right" value="bottom-right" name="position" type="radio"/> </label>
</div>
</div>
</div>
</page-content>
</template>
<script>
import 'materialize-css/dist/css/materialize.min.css'
</script>
<style>
.box {
width: 120px;
margin-left: 20px;
}
.tile {
width: 31.5%;
background: #9aeae3;
height: 40px;
border: 1px solid #26a69a;
float: left;
margin: 1px;
cursor: pointer;
border-radius: 1px;
}
.tile.active {
background: #26a69a;
border-color: #0d6f66;
}
:not(pre) > code[class*="language-"], pre[class*="language-"] {
padding: 1px 2em;
border-radius: 6px;
background: white;
}
</style>
这是我相关的webpack.config.js
内容
var path = require('path')
const merge = require('webpack-merge');
const NpmInstallPlugin = require('npm-install-webpack2-plugin');
var webpack = require('webpack')
var ManifestPlugin = require('webpack-manifest-plugin')
var InlineChunkManifestHtmlWebpackPlugin = require('inline-chunk-manifest-html-webpack-plugin')
var WebpackChunkHash = require("webpack-chunk-hash")
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')
const common = {
entry: './src/app.js',
devServer: {
hot: true,
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /(\.css$)/,
loaders: ['css-loader'],
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(woff|woff2|ttf|eot)(\?\S*)?$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve : {
alias: {
'vue$': 'vue/dist/vue'
}
}
}
if(TARGET === "dev-server") {
module.exports = merge(common, {
devtool: 'cheap-module-eval-source-map',
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
stats: true,
noInfo: true,
quiet: true,
stats: 'errors-only',
host: process.env.HOST,
disableHostCheck: true,
port: 3000
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin({
save: true // --save
}),
]
});
}
错误似乎与 less-loader
部分有关。当我注释掉这些行时,我再也看不到错误了。但是包含 .less
文件的项目的某些部分将无法编译。
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
最佳答案
更改模块导出
if(TARGET === "dev-server") {
module.exports = merge(common, {
到
if(TARGET === "dev-server") {
export default { merge(common, {
关于javascript - "export ' 默认 ' (imported as ' __vue_script__ ') was not found in ' !!babel-loader,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46934296/
我正在为我的 React 项目设置 Webpack,并对 babel 感到困惑, babel-core , babel-loader , babel-preset-2015和babel-preset-
所有这些 babel 依赖项是什么?它们各自的用途是什么,它们有何不同?我应该为我的 nodejs 网络应用程序使用哪一个? 我已经查看了 API 网站,但是否有任何指南可以将这些内容转化为简单的人类
我的 Node Webpack 项目使用了三个 babel 库。它们之间有什么区别以及如何使用它们? "dependencies": { "babel-runtime": "^5.8.24" }
我用 @babel/core 替换了 babel-core 而 babel-loader 期望 babel-core: { "name": "myproject-ui", "version":
我尝试配置一个环境来使用 babel 和 webpack 开发 javascript。 但是我不明白关于presets的babel配置. 在 Usage Guide ,我们可以看到预设为 "@babe
我已经安装了 babel 7.5,理想情况下它应该以 preset-env 包为目标,但不确定它为什么要寻找“babel-preset-es2015”。 你们能告诉我我做错了什么吗?下面是我的代码 p
我正在更新a boilerplate中使用的babel包,从 babel-core、babel-register 等到@babel/core、@babel/register > 等 问题:在 npm
设置 通天塔 6 (^6.0.0), Node 5.4.0,Express 4.13.x, babel-node 和 babel-register 都有警告,禁止在生产环境中使用babel.io 网站
我正在尝试转换编译我的 react/es6 代码并且来自 browserify。由于新的 babel 6 版本以及大多数教程现在已经过时的事实,我正在努力创建一个 webpack 构建。这适用于我的
我有一个使用 Typescript 和 @babel/preset-env 的项目。与 Webpack 捆绑失败并显示此错误和以下配置。 如果我取消注释该行,这会强制 @babel/plugin-pr
我在浏览器中使用 babel -> babel-standalone 现在我想使用 ES decorator 语法。但是所有的通天塔doc intro 是服务器端的 babel,比如 ` { "p
我正在编写对从 cdnjs.com 引入的所有这些库的 react 。但是,我发现它报告错误:'Uncaught TypeError: Cannot read property 'keys' of u
我正在使用 babel v7.6.x 并设置了以下内容。 包.json "scripts": { "dev": "nodemon --exec babel-node bin/index.js
我正在学习巨大的 JavaScript 生态系统,但我无法理解以下内容。 Babel 是一个编译器,来自官网: Babel is a toolchain that is mainly used to
在我使用yarn add -D babel-plugin-react-relay安装relay-query插件后,并在运行开发服务器后,我收到此错误: Error: [BABEL] /Users/ne
我使用 babel 6 和 React 插件,并按照文档说明设置转译过程。我已经阅读过要让 React 工作,我需要使用 es2015 和 React preset。最初,使用这两个预设一切都运行良好
我对 Babel 选项/配置有点迷失。我想使用最新的 js 功能并编译(使用 webpack)为浏览器代码。 babel-polyfill 和有什么区别和 babel plugins与 babel-p
这个问题在这里已经有了答案: Babel file is copied without being transformed (10 个答案) 关闭 6 年前。 我只是使用 npm (npm inst
安装时 npm install browserify babelify babel-preset-es2015 我正面临以下警告信息 npm WARN deprecated babel-preset-
什么版本的标准? 12.0.1 什么操作系统、Node.js 和 npm 版本? 视窗 10, 节点 v10.15.1, NPM v.6.8.0 你期望会发生什么? 我在 devDependencie
我是一名优秀的程序员,十分优秀!