`vue-cli-service build` 不生成模板代码 [英] `vue-cli-service build` does not generate template's code

问题描述

我想了解为什么我的 Vue 项目在屏幕上看不到任何内容.我查看了一个 Vue CLI 生成的项目，并在 main.js 中看到了这段代码:

I'm trying to understand why I'm not seeing anything on screen from my Vue project. I looked at a Vue CLI generated project, and saw this code in main.js:

new Vue({
  render: h => h(App),
}).$mount('#appmodified')

但我正在使用以下代码，基于 示例 TODO 沙箱:

But I'm using the following code, based on a sample TODO sandbox:

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

当我运行 npm run build 时，这种实例化 Vue 的方式不会返回任何警告或错误:

This way of instantiating Vue does not return any warnings or errors when I run npm run build:

> @ build C:\wamp64\www\vuewtest
> vue-cli-service build


\  Building for production...

 DONE  Compiled successfully in 1858ms                                                                                        13:14:40

  File                                 Size               Gzipped

  dist\js\chunk-vendors.6018a262.js    65.29 KiB          23.49 KiB
  dist\js\index.377fe308.js            1.96 KiB           1.01 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

为什么我的代码在构建完成时没有出现错误，但在浏览器中什么也不显示?

Why does my code show nothing in the browser despite the build completing without error?

main.js:

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */

//************ this works ************
new Vue({
    render: h => h(App),
}).$mount('#appmodified')

//************ this does not work *************
new Vue({
    el: '#appmodified',
    template: '<App/>',
    components: { App }
})

vue.config.js:

module.exports = {
    "publicPath": "",
    pages: {
        index:{
            entry: "main.js",
            template: "index.html"
        }
    }
}

package.json:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@vue/cli-service": "^3.9.2",
    "vue": "^2.6.10",
    "vue-template-compiler": "^2.6.10"
  }
}

推荐答案

虽然您可能在构建时看不到错误/警告，但您仍应在浏览器控制台中收到运行时警告:

While you might not see an error/warning at build time, you should still get a runtime warning in the browser console:

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

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

默认情况下，Vue CLI 项目不包括运行时编译器，需要在运行时编译字符串模板或 DOM 内 HTML(请参阅 运行时 + 编译器与仅运行时).如果您更喜欢使用组件的 template 属性，请使用 runtimeCompiler 标志:

By default, Vue CLI projects exclude the runtime compiler, needed to compile string templates or in-DOM HTML at runtime (see Runtime + Compiler vs. Runtime-only). If you prefer to use the component's template property, configure Vue with the runtimeCompiler flag:

// vue.config.js
module.exports = {
  runtimeCompiler: true
}

这篇关于`vue-cli-service build` 不生成模板代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！