vue.js - `vue-cli-service build`不生成模板的代码

Question

我试图了解为什么我的Vue项目在屏幕上看不到任何内容。我查看了Vue CLI生成的项目，并在main.js中看到了以下代码:

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

但是我基于 sample TODO sandbox使用以下代码:

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

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

> @ 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

尽管构建成功完成但没有错误，为什么我的代码在浏览器中什么也没显示？
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"
  }
}

Answer 1

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

[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项目不包括运行时编译器，而运行时编译器是在运行时编译字符串模板或in-DOM HTML所必需的(请参阅 Runtime + Compiler vs. Runtime-only)。如果您更喜欢使用组件的 template属性，请使用 runtimeCompiler flag配置Vue:

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