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警告]：您正在使用Vue的仅运行时版本，而模板编译器不可用。可以将模板预编译为渲染函数，也可以使用编译器附带的内部版本。

默认情况下，Vue CLI项目不包括运行时编译器，这是在运行时编译字符串模板或in-DOM HTML所必需的（请参见Runtime + Compiler vs. Runtime-only）。如果您更喜欢使用组件的template属性，请使用runtimeCompiler flag配置Vue：

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

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

1 个答案: