vue.js - 通过 Vue Router 渲染 html 文件

问题描述

我正在尝试使用 Vue 路由器来呈现 HTML 部分文件。我可以很好地渲染 vue 实例，但是当我尝试切换到我的第一个 HTML 文件时，我得到了错误。

[Vue 警告]：您正在使用仅运行时构建的 Vue，其中模板编译器不可用。要么将模板预编译为渲染函数，要么使用包含编译器的构建。

我之前在尝试初始化 Vue 实例时已经看到了这一点，但这是我尝试启动路由的时候。感谢您的任何帮助，您可以提供。

import Vue from 'vue'
import router from '@/components/elements/router'
import Elements from '@/components/elements/elements'

// eslint-disable-next-line no-new

new Vue({
  router,
  el: '#elements',
  render: h => h(Elements)
})

routes/index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Routes from './routes'

// Initialize Vue Router
Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  routes: Routes
})

routes/routes.js：

import Typography from '@/html/global/partials/typography.html'

const Routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/typography',
    name: 'Typography',
    mode: history,
    component: { template: Typography }
  }
]

export default Routes

elements.vue：

<template>
  <div id="elements-library">
    <Nav />
    <router-view />
  </div>
</template>

<script>
import Nav from '@/components/elements/partials/nav'
export default {
  name: 'elements',
  components: {
    Nav
  },
}
</script>

nav.vue：

<template>
  <nav id="elements-nav">
    <router-link to="/typography">Typography</router-link>
  </nav>
</template>

<script>
export default {
  name: 'elements',
}
</script>

Webpack.config

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

let __root = path.join(__dirname, '../')
let __src = path.join(__dirname, '../src')
let __dist = path.join(__dirname, '../dist')

module.exports = {
  context: __src,
  devtool: 'source-map',
  entry: {
    elements: './js/elements/elements.js'
  },
  output: {
    path: path.resolve(__dist),
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].chunk.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: ['vue-style-loader', 'css-loader', 'sass-loader']
          }
        }
      },
      {
        test: /\.html$/,
        use: [{
          loader: 'html-loader',
          options: {
            minimize: true,
            removeComments: false,
            collapseWhitespace: false,
            removeAttributeQuotes: false
          }
        }]
      },
      {
        test: /\.(gif|png|jp(e*)g)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
            publicPath: '../'
          }
        }]
      },
      {
        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[ext]',
            publicPath: '../' // override the default path
          }
        }]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: 'css/[name].css'
    }),
    new HtmlWebpackPlugin({
      template: 'html/elements.html',
      filename: 'index.html',
      inject: false
    }),
  ],
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.resolve(__src),
      Vue: 'vue/dist/vue.esm.js'
    }
  }
}

标签： vue.jsvue-router

vue.js - 通过 Vue Router 渲染 html 文件

问题描述

解决方案

推荐阅读