嗨，我只是将我的项目从webpack2.x升级到了webpack 4.x，还升级了vue和依赖项，所以在下面出现了错误
[Vue警告]：无法安装组件：未定义模板或渲染功能
以下是配置：
webpack.conf.base.js
var path = require('path')
var utils = require('./utils')
var config = require('./config')
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
mode: 'development',
entry: {
app: './src/main.ts',
login: './src/login.ts',
vendor: ['echarts', 'element-ui', 'lodash', 'moment']
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath :
config.dev.assetsPublicPath
},
resolve: {
extensions: ['.ts', '.js', '.json', '.md', '.vue'],
modules: [
resolve('src'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'assets': resolve('src/assets'),
'md5': 'blueimp-md5',
'styles': resolve('src/styles'),
}
},
module: {
rules: [{
test: /\.vue$/,
use: {
loader: 'vue-loader',
},
},
{
test: /\.(css|scss)$/,
use: [
{
loader: 'vue-style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
minimize: false,
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
includePaths: [
path.join(__dirname, '../src/styles'),
require('bourbon').includePaths,
path.join(__dirname, '../node_modules')
]
}
},
],
},
{
test: /\.ts$/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true
}
},
include: [resolve('src')],
},
{
test: /\.(js|es6)$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime'],
exclude: file => (
/node_modules/.test(file) &&
!/\.vue\.js/.test(file) // vue文件加入白名单
)
}
},
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: {
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
},
{
test: /\.md$/,
use: [
{
loader: 'vue-loader'
},
{
loader: 'vue-markdown-loader/lib/markdown-compiler',
options: {
raw: true
}
}
]
}
]
}
}
webpack.conf.dev.js
var path = require('path')
var webpack = require('webpack')
var config = require('./config')
var merge = require('webpack-merge')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
var baseWebpackConfig = require('./webpack.conf.base')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
mode: 'development',
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'build/tpl/index.html',
favicon: path.join(__dirname, '..', 'src/assets/images/logo1.png'),
inject: true,
excludeChunks: ['login']
}),
new HtmlWebpackPlugin({
filename: 'login.html',
template: 'build/tpl/login.html',
favicon: path.join(__dirname, '..', 'src/assets/images/logo1.png'),
inject: true,
excludeChunks: ['app', 'vendor']
}),
new FriendlyErrorsPlugin(),
new VueLoaderPlugin()
]
})
main.ts
import 'babel-polyfill'
import 'styles/app.scss'
import Vue from 'vue'
import store from 'store'
import App from 'pages/app'
import router from 'router'
import svgicon = require('vue-svgicon')
import * as ElementUI from 'element-ui'
import * as VueLazyload from 'vue-lazyload'
import LazyRender from 'vue-lazy-render'
import '../theme/index.css'
import * as Cookie from 'vue-cookie'
import * as filters from './filters'
// import all icons
import 'components/icons'
import ProcessList from 'components/processList'
import Loadmore from 'components/loadMore'
import VirtualScroller from 'components/virtualScroll'
import { Global } from './plugins/global'
import { UIAlert } from './plugins/alert'
import { UINextWork } from './plugins/netWork'
import AddTabs from './plugins/addTabs'
import socketPlugin from './util/websocket'
import * as Raven from 'raven-js'
import * as RavenVue from 'raven-js/plugins/vue'
// directive
import loadmore from './plugins/directives/loadmore'
Vue.directive('loadmore', loadmore)
// 测试环境，正式环境添加监控
const env = process.env.APP_ENV
const EventBus = new Vue()
if (env === 'prod') {
Raven.config('https://0b64cb4e09924c889cace272b5b763cf@sentry.io/237191')
.addPlugin(RavenVue, Vue)
.install()
} else if (env === 'sit') {
Raven.config('https://8bddc2e74db540b58612790e5bccf43a@sentry.io/237278')
.addPlugin(RavenVue, Vue)
.install()
} else if (env === 'dev') {
}
Vue.use(svgicon, {
tagName: 'svgicon'
})
// register global utility filters.
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
Vue.component('process-list', ProcessList)
Vue.component('Loadmore', Loadmore)
Vue.component('virtual-scroller', VirtualScroller)
Vue.use(Cookie)
Vue.use(ElementUI)
Vue.use(Global)
Vue.use(UIAlert)
Vue.use(UINextWork)
Vue.use(AddTabs)
Vue.use(socketPlugin)
Vue.use(VueLazyload, {
lazyComponent: true
})
Vue.use(LazyRender)
router.beforeEach((to, from, next) => {
// 页面登录状态验证
if (!Cookie.get('c_token')) {
// 跳转到登陆页面
window.location.href = `${process.env.LOGIN_HOST}/login.html?from=jzquant`
return
} else if (store.getters.getEnableSave) {
ElementUI.MessageBox.confirm('您有尚未保存修改，确定离开此页面?', '提示', {
type: 'warning',
cancelButtonText: '留在该页面',
confirmButtonText: '确定离开'
}).then(() => {
store.commit('setSaveAble', false)
next()
}).catch(() => {
next(false)
})
} else {
store.commit('setSaveAble', false)
next()
}
})
Object.defineProperties(Vue.prototype, {
$bus: {
get: function() {
return EventBus
}
}
})
new Vue({
router,
store,
template: '<App/>',
components: { App },
}).$mount('#app')
package.json
{
"name": "algorithms",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "allen-mo <735016387@qq.com>",
"private": true,
"scripts": {
"add": "node ./tool/cli.js add",
"dev": "node build/dev-server.js",
"qa": "cross-env APP_ENV=qa npm run build",
"prod": "cross-env APP_ENV=prod npm run build",
"sit": "cross-env APP_ENV=sit npm run build",
"build": "node build/build.js",
"lint": "tslint -c ./tslint.json ./src/**/*.ts",
"svg": "vsvg -s ./src/assets/svg -t ./src/components/icons",
"analyz": "app_ENV=prod npm_config_report=true npm run build"
},
"dependencies": {
"@babel/polyfill": "^7.0.0",
"@types/lodash": "4.14.91",
"ali-oss": "^6.0.1",
"axios": "^0.16.1",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "6.26.0",
"bourbon": "^5.1.0",
"cross-env": "^5.2.0",
"downlinkmax": "^0.1.0",
"echarts": "^4.2.0-rc.2",
"element-theme-default": "^1.4.13",
"element-ui": "^2.2.0",
"eventemitter3": "3.0.0",
"html-webpack-plugin": "^3.2.0",
"lodash": "^4.17.11",
"mint-ui": "^2.2.13",
"moment": "2.20.1",
"normalize.css": "^5.0.0",
"protobufjs": "^6.8.8",
"qs": "^6.4.0",
"raven-js": "^3.27.0",
"ts-lint": "^4.5.1",
"ts-loader": "^5.3.0",
"tslint-fix": "^0.1.3",
"vee-validate": "^2.1.2",
"vue": "^2.5.17",
"vue-cookie": "^1.1.4",
"vue-lazy-render": "^1.0.20",
"vue-lazyload": "^1.1.4",
"vue-loadmore": "^2.0.0",
"vue-property-decorator": "^5.0.1",
"vue-router": "^3.0.1",
"vue-svgicon": "^3.2.1",
"vue-template-compiler": "^2.5.17",
"vue-virtual-scroller": "^1.0.0-beta.2",
"vuex": "^2.2.1",
"vuex-class": "^0.2.0",
"webpack-bundle-analyzer": "^3.0.3"
},
"devDependencies": {
"@babel/cli": "^7.1.5",
"@babel/core": "^7.1.5",
"@babel/plugin-proposal-decorators": "^7.1.2",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.1.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.5",
"@babel/preset-stage-2": "^7.0.0",
"@vue/babel-preset-app": "^3.1.1",
"autoprefixer": "^9.3.1",
"chalk": "^2.4.1",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^1.0.1",
"element-theme-chalk": "^2.3.2",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"friendly-errors-webpack-plugin": "^1.1.3",
"fs-plus": "^3.0.0",
"http-proxy-middleware": "^0.17.4",
"node-sass": "^4.5.0",
"normalize.css": "^5.0.0",
"opn": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"ora": "^3.0.0",
"postcss-assets": "^5.0.0",
"postcss-loader": "^3.0.0",
"prompt": "^1.0.0",
"rimraf": "^2.6.1",
"rucksack-css": "^1.0.2",
"sass-loader": "^6.0.7 ",
"semver": "^5.3.0",
"shelljs": "^0.8.2",
"stylelint": "^9.7.1",
"stylelint-config-standard": "^18.2.0",
"stylelint-order": "^1.0.0",
"ts-loader": "^5.3.0",
"tslib": "^1.7.1",
"typescript": "^2.3.2",
"url-loader": "^1.1.2",
"vue-loader": "^15.4.2",
"vue-markdown-loader": "^2.4.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.25.1",
"webpack-dev-middleware": "^3.4.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0",
"yargs": "^12.0.2"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
它让我困了一个星期，希望得到帮助，谢谢。