通过 Vue Router 渲染 html 文件答案

【问题标题】：Render html files through Vue Router通过 Vue Router 渲染 html 文件
【发布时间】：2019-12-21 05:58:20
【问题描述】：

我正在尝试使用 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'
    }
  }
}

【问题讨论】：

你在使用 VueCLI 吗？
不，我没有使用它。

标签： vue.js vue-router

【解决方案1】：

尝试将此行添加到您的webpack.config.js。

resolve: { alias: { vue: 'vue/dist/vue.esm.js' } }

参考：GitHub issue、GitHub issue。

【讨论】：

感谢您的回复。在我的 webpack 配置中，我已经有 resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': path.resolve(__src), Vue: 'vue/dist/vue.esm.js' } }
如果您能提供您的webpack.config.js，那就太好了。
尝试使用小写的vue。也可以试试'vue$': 'vue/dist/vue.esm.js'。
也尝试将import Vue from 'vue'改为import Vue from 'vue/dist/vue.js'；
我已经添加了我的 webpack.config 文件

【解决方案2】：

通过@Javas 使用上面的 cmets，我可以通过添加到我的 webpack.config 文件来使其工作

  resolve: { alias: {  'vue$': 'vue/dist/vue.esm.js' } }

以及改变对象的模板部分

  {
    path: '/typography',
    name: 'Typography',
    component: { template: `<div id="elem-typography"> ${Typography} </div>` }
  }

【讨论】：