我已经看到这个问题被问了很多次了，但在这种情况下，我认为它更多地与我的因果报应/网络包配置有关，而不是与我在Vue中所做的事情有关。这是因为我只在使用Karma(使用最新的Chrome headless)运行测试时收到警告，但在直接使用webpack dev-server时没有收到警告。
这是我从app/webpack.base.config.js文件开始的conf:
module.exports = {
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {}
// other vue-loader options go here
}
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /.css/,
loader: 'style-loader!css-loader'
},
{
test: /.woff(?v=d+.d+.d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /.woff2(?v=d+.d+.d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /.ttf(?v=d+.d+.d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /.eot(?v=d+.d+.d+)?$/,
loader: 'file-loader'
}, {
test: /.svg(?v=d+.d+.d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
},
{
test: /.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
};
app/webpack.config.js
const path = require('path');
const webpack = require('webpack');
const mergeConfig = require('webpack-merge');
const baseConfig = require('./webpack.base.config');
module.exports = mergeConfig(baseConfig, {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
devServer: {
historyApiFallback: true,
noInfo: true,
hot: true
},
performance: {
hints: false
},
devtool: '#eval-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin()
]
});
app/test/carma.conf.js(此处仅使用webpack.base.config.js文件，而非全部)
// Karma configuration
const webpackConfig = require('../webpack.base.config');
process.env.CHROME_BIN = require('puppeteer').executablePath();
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '.',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'./index.js'
],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'./index.js': ['webpack']
},
// karma watches the test entry points
// (you don't need to specify the entry option)
// webpack watches dependencies
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['spec'],
// web server port
port: 8080,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
},
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: 1
});
};
app/test/index.js
import Vue from 'vue';
Vue.config.productionTip = false;
// require all test files (files that ends with .js)
const testsContext = require.context('./specs', true, /.js/);
testsContext.keys().forEach(testsContext);
然后我在安装我的规格中的组件时收到警告，如下所示：
import Vue from 'vue';
import Extractor from './../../../src/components/Extractor.vue';
describe('Extractor component', () => {
it('sets the correct default data', () => {
const component = new Vue(Extractor).$mount();
expect(component.url).toBe('');
expect(component.responseCode).toBe(null);
expect(component.body).toBe(null);
expect(component.errorMessage).toBe(null);
});
});
警告：这种情况仅发生如果：
- 我使用vue类组件库
- 我的组件从另一个继承
- 当通过Karma/Chrome无头运行代码时
我在日志中得到的错误是：
[Vue warn]：属性或方法"有效的"；未在实例上定义，但在渲染过程中被引用。通过初始化该属性，确保该属性在数据选项中是被动的，或者对于基于类的组件是被动的。请参阅：https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-反应特性。
；有效的"；它抱怨的属性在ApiComponent类(基本上是父类)内部。
这是一个给我警告的组件：
import http from './../modules/http';
import ApiComponent from './sub/ApiComponent';
import Component from 'vue-class-component';
// @see https://github.com/vuejs/vue-class-component
// @see https://github.com/wycats/javascript-decorators/blob/master/README.md
@Component()
export default class Extractor extends ApiComponent {
url = '';
sendRequest() {
return new Promise((resolve, reject) => {
// some AJAX call here
});
}
}
如果不是让Extractor从ApiComponent扩展，而是让它扩展Vue类，并在Extractor类中复制和粘贴所有ApiComponent代码，那么警告就会消失。重点是。。。为什么我只有在通过因果报应运行代码时才会收到警告？
警告通过装饰超类(ApiComponent)而消失。
import Vue from 'vue';
import Component from 'vue-class-component';
@Component
export default class ApiComponent extends Vue {
// ...
}