Vue.js 为什么webpack无法加载从vue组件导入的*.js类？
尝试在prod/dev envs中构建时，我遇到以下错误：Vue.js 为什么webpack无法加载从vue组件导入的*.js类？,vue.js,webpack,babeljs,Vue.js,Webpack,Babeljs,尝试在prod/dev envs中构建时，我遇到以下错误： > frontend@0.1.0 dev-build /usr/local/var/www/DSP/frontend > vue-cli-service build --mode development 98% after emitting ERROR Failed to compile with 2 errors
> frontend@0.1.0 dev-build /usr/local/var/www/DSP/frontend
> vue-cli-service build --mode development
98% after emitting
ERROR Failed to compile with 2 errors 3:11:23 PM
error in ./src/classes/Contact.js
Module parse failed: Unexpected token (9:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| _id
|
> _phone
| _pipelineLevel
| _tags
@ ./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/projects/project/pipeline/Pipeline.vue?vue&type=script&lang=js& 162:0-49 232:110-117 292:51-58
@ ./src/views/projects/project/pipeline/Pipeline.vue?vue&type=script&lang=js&
@ ./src/views/projects/project/pipeline/Pipeline.vue
@ ./src/router.js
@ ./src/main.js
@ multi ./src/main.js
error in ./src/classes/Script/Node.js
Module parse failed: Unexpected token (9:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| export default class Node {
> id;
|
| script;
@ ./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Script/Writer/Writer.vue?vue&type=script&lang=js& 117:0-48 188:40-44 195:40-44
@ ./src/components/Script/Writer/Writer.vue?vue&type=script&lang=js&
@ ./src/components/Script/Writer/Writer.vue
@ ./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/projects/project/script/ScriptEditor.vue?vue&type=script&lang=js&
@ ./src/views/projects/project/script/ScriptEditor.vue?vue&type=script&lang=js&
@ ./src/views/projects/project/script/ScriptEditor.vue
@ ./src/router.js
@ ./src/main.js
@ multi ./src/main.js
ERROR Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend@0.1.0 dev-build: `vue-cli-service build --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend@0.1.0 dev-build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/new/.npm/_logs/2019-09-12T12_11_24_212Z-debug.log
package.json{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"prod-build": "vue-cli-service build",
"dev-build": "vue-cli-service build --mode development",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"@tinymce/tinymce-vue": "^3.0.1",
"@vue/cli": "^3.11.0",
"core-js": "^2.6.5",
"css-loader": "^3.2.0",
"eslint": "^6.3.0",
"moment": "^2.24.0",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-loader": "^15.7.1",
"vue-router": "^3.0.3",
"vue-the-mask": "^0.11.1",
"vuetify": "^2.0.11",
"vuex": "^3.0.1"
},
"devDependencies": {
"@babel/cli": "^7.6.0",
"@babel/core": "^7.6.0",
"@babel/polyfill": "^7.6.0",
"@mdi/font": "^4.2.95",
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-plugin-pwa": "^3.11.0",
"@vue/cli-plugin-unit-mocha": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/test-utils": "1.0.0-beta.29",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.6",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.1.2",
"deepmerge": "^4.0.0",
"eslint-plugin-vue": "^5.0.0",
"fibers": "^4.0.1",
"sass": "^1.22.10",
"sass-loader": "^7.3.1",
"vue-cli-plugin-vuetify": "^0.6.3",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/standard"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)"
],
"env": {
"mocha": true
}
}
]
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
webpack.config.jsmodule.exports = {
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader'
},
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
}
},
]
}
]
},
}
module.exports = {
publicPath: '/pwa',
outputDir: '../public/pwa',
indexPath: '../../templates/views/index.html.twig',
// Setting this to false can speed up production builds if you don't need source maps for production.
productionSourceMap: false,
// By default, generated static assets contains hashes in their filenames for better caching control.
// However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML
// generated by Vue CLI, you can disable filename hashing by setting this option to false,
filenameHashing: false,
lintOnSave: false,
// https://cli.vuejs.org/ru/config/#devserver-proxy
devServer: {},
// https://cli.vuejs.org/ru/config/#chainwebpack
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = 'Ojok Deep Sales Platform';
args[0].template = './index.html.template';
args[0].filename = '../../templates/views/index.html.twig';
return args;
});
},
}
vue.config.jsmodule.exports = {
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader'
},
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
}
},
]
}
]
},
}
module.exports = {
publicPath: '/pwa',
outputDir: '../public/pwa',
indexPath: '../../templates/views/index.html.twig',
// Setting this to false can speed up production builds if you don't need source maps for production.
productionSourceMap: false,
// By default, generated static assets contains hashes in their filenames for better caching control.
// However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML
// generated by Vue CLI, you can disable filename hashing by setting this option to false,
filenameHashing: false,
lintOnSave: false,
// https://cli.vuejs.org/ru/config/#devserver-proxy
devServer: {},
// https://cli.vuejs.org/ru/config/#chainwebpack
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = 'Ojok Deep Sales Platform';
args[0].template = './index.html.template';
args[0].filename = '../../templates/views/index.html.twig';
return args;
});
},
}
import Utils from '../utils/utils';
export default class Contact {
_id
_phone
_pipelineLevel
_tags
_listOfContacts
_recallAt
_color
_name
_category
_country
_region
_city
_postalCode
_address
_longitude
_latitude
_website
_email
_description
_referral
_utmSource
_utmMedium
_utmCampaign
_utmTerm
_utmContent
constructor(fields) {
Object.keys(fields).forEach(key => this['_' + key] = fields[key])
}
get id() {
return this._id
}
get phone() {
return this._phone.sourceFormat
}
get pipeline() {
return this._pipelineLevel ? this._pipelineLevel.pipeline : null
}
get pipelineLevel() {
return (this._pipelineLevel || null)
}
set pipelineLevel(level) {
this._pipelineLevel = {...this._pipelineLevel, ...level}
}
get pipelineLevelID() {
return (this.pipelineLevel ? this.pipelineLevel.id : null)
}
get pipelineLevelName() {
return this.pipelineLevel ? this.pipelineLevel.name : null
}
get tags() {
return this._tags
}
set tags(tags) {
this._tags = tags
}
get listOfContacts() {
return this._listOfContacts
}
get recallAt() {
return (this._recallAt ? this._recallAt : null)
}
set recallAt(recallAt) {
this._recallAt = recallAt
}
get recallAtHumanized() {
return this.recallAt ? Utils.datetimeHumanizedDifference(this.recallAt) : null
}
get color() {
return this._color
}
set color(color) {
this._color = color
}
get name() {
return this._name
}
set name(name) {
this._name = name
}
get category() {
return this._category
}
set category(category) {
this._category = category
}
get country() {
return this._country
}
get region() {
return this._region
}
get city() {
return this._city
}
get postalCode() {
return this._postalCode
}
get address() {
return this._address
}
get longitude() {
return this._longitude
}
get latitude() {
return this._latitude
}
get website() {
return this._website
}
set website(site) {
this._website = site
}
get email() {
return this._email
}
set email(email) {
this._email = email
}
get description() {
return this._description
}
set description(description) {
this._description = description
}
get referral() {
return this._referral
}
get utmSource() {
return this._utmSource
}
get utmMedium() {
return this._utmMedium
}
get utmCampaign() {
return this._utmCampaign
}
get utmTerm() {
return this._utmTerm
}
get utmContent() {
return this._utmContent
}
toJSON() {
return Object.keys(this).reduce((json, value) => {
json[value.slice(1)] = this[value]
return json
}, {})
}
}
Webpack等对我来说是个谜，我没有时间或资源深入研究：-（在升级到最新版本的
vue cli plugin vuetifyvuetify loadervue cli plugin vuetifyvuetify loader