vuejs2 - ./src/auth/AuthService.js 模块解析失败:意外令牌 (7:16)
问题描述
我已经使用 webpack 4 设置了 vuejs,现在它工作正常我已经在我的 vuejs 应用程序中添加了 auth0 文件并将其包含到登录页面视图中这可能是一个 webpack 问题,因为在控制台中导出默认值不起作用。每当我尝试使用 vue-cli 时,它在示例中也可以正常工作。我想要一个 webpack 4。
ERROR in ./src/auth/AuthService.js
Module parse failed: Unexpected token (7:16)
You may need an appropriate loader to handle this file type.
|
| export default class AuthService {
| authenticated = this.isAuthenticated()
| authNotifier = new EventEmitter()
|
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/session/Login.vue 59:0-49
@ ./src/views/session/Login.vue
@ ./src/router/index.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/index.js
这是我的登录 vue 文件。
<template>
<div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Auth0 - Vue</a>
<router-link :to="'/'"
class="btn btn-primary btn-margin">
Home
</router-link>
<button
class="btn btn-primary btn-margin"
v-if="!authenticated"
@click="login()">
Log In
</button>
<button
class="btn btn-primary btn-margin"
v-if="authenticated"
@click="logout()">
Log Out
</button>
</div>
</div>
</nav>
<div class="container">
<router-view
:auth="auth"
:authenticated="authenticated">
</router-view>
</div>
</div>
</template>
<script>
import AuthService from './auth/AuthService'
const auth = new AuthService()
const { login, logout, authenticated, authNotifier } = auth
export default {
name: 'app',
data () {
authNotifier.on('authChange', authState => {
this.authenticated = authState.authenticated
})
return {
auth,
authenticated
}
},
methods: {
login,
logout
}
}
</script>
<style>
@import 'bootstrap/dist/css/bootstrap.css';
.btn-margin {
margin-top: 7px
}
</style>
这是我的 webpack 配置文件。
const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
// plugins
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
// the path(s) that should be cleaned
let pathsToClean = [
'dist'
]
// the clean options to use
let cleanOptions = {
root: __dirname,
verbose: false, // Write logs to console.
dry: false
}
// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
const publicPath = '/';
// Make sure any symlinks in the project folder are resolved:
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: ["babel-polyfill", "./src/index.js"],
output: {
// The build folder.
path: resolveApp('dist'),
// Generated JS file names (with nested folders).
// There will be one main bundle, and one file per asynchronous chunk.
// We don't currently advertise code splitting but Webpack supports it.
filename: 'static/js/[name].[chunkhash:8].js',
chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: publicPath
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
contentBase: false,
compress: true,
port: 8080 // port number
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/img/[name].[hash:7].[ext]'
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/fonts/[name].[hash:7].[ext]'
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "sass-loader"
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(pathsToClean, cleanOptions),
new HtmlWebPackPlugin({
template: "./index.html",
filename: "./index.html",
favicon: './static/favicon.png'
}),
new CopyWebpackPlugin([{
from: 'static/img',
to: 'static/img'
}]),
new MiniCssExtractPlugin({
filename: "static/css/[name].[contenthash:8].css",
chunkFilename: "static/css/[name].[contenthash:8].css"
}),
//jquery plugin
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
}
解决方案
我有同样的错误,我解决了它在 Babel 中翻译 AuthService.js 模块: https ://babeljs.io/repl
但是,并不是每个人都想要的解决方案,因此,您可以尝试:
无法使用来自 webpack 的 babel-loader 加载 stage-3 javascript 文件
我没有用这个解决方案解决。
推荐阅读
- javascript - 输入框内焦点时单击两次的图标
- c# - 使用 C# EntityFramework 创建一个加密的 SQLite 数据库并使用 Database Browser for SQLite 打开
- python - Ansible winrm "credssp: 'module' 对象没有属性 'TLSv1_2_METHOD
- r - 将 rmarkdown 部分转换为图像
- c++ - 指向相同类型结构的访问指针?
- nginx - Nginx 负载均衡器策略 - 流量始终到同一台服务器
- r - 如何对已经采用向量的函数进行向量化?
- c# - 尝试为 Watson 的 Speech To Text 创建凭据时,Android 上的无限循环。而 (!credentials.HasIamTokenData())
- php - 为什么我的 php 多卷曲请求出现 500 错误
- mysql - 创建触发器时的错误过程