Question

我使用的是Vue-cli webpack模板（https://github.com/vuejs-templates/webpack），在我尝试使用vue-router之前，我的项目一切正常。然后它开始发送此错误：
（[Vue警告]：无法安装组件：模板或渲染函数未定义。（在src \ components \ vacancy \ Vacancy.vue中找到））。

我尝试了Stackoverflow的大部分答案，但它没有帮助。我现在很鄙视，因为我不知道如何在旅途中保持发展。所以这是我的项目的相关文件：

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper'


Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/main/Main'
import Vacancy from '@/components/vacancy/Vacancy'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
    {
        path: '/',
        name: 'Main',
        component: Main
    },
    {
        path: '/vacancy',
        name: 'Vacancy',
        component: Vacancy
    },
    { path: '*', redirect: '/' }
    ]
})

的package.json

    {
  "name": "sinc",
  "version": "1.0.0",
  "description": "VueJS-app with Bitrix integration",
  "author": "Eldar",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  },
  "dependencies": {
    "css-loader": "^0.27.3",
    "jquery": "^3.2.1",
    "vue": "^2.2.2",
    "vue-awesome-swiper": "^2.3.8",
    "vue-router": "^2.2.0",
    "vue-style-loader": "^2.0.4"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.2.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.10.0",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.1.0",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "node-sass": "^4.5.1",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.1.0",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.3",
    "semver": "^5.3.0",
    "style-loader": "^0.16.0",
    "url-loader": "^0.5.7",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^11.1.4",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "^2.2.4",
    "webpack": "^2.2.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.16.1",
    "webpack-merge": "^2.6.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

webpack.base.conf.js

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      'modules': path.resolve(__dirname, '../node_modules')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      }, 
      {
          test: /\.s[a|c]ss$/,
          loader: 'style!css!sass'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

Answer 1

编辑：在结束＆＃39;模板＆＃39;中被证明是一个错字。内部标记＆＃39;空缺＆＃39;成分，它

Vue路由器。无法安装组件

1 个答案: