Vue.js “npm run build”，但 Vue.js 未绑定到 DOM/工作答案

【问题标题】：Vue.js "npm run build" but Vue.js not bound to DOM / workingVue.js “npm run build”，但 Vue.js 未绑定到 DOM/工作
【发布时间】：2017-09-26 03:06:28
【问题描述】：

这里是 Vue.js 的新手。在 Mac OS 上使用版本：

$ npm --version
4.6.1
$ vue --version
2.8.1

我将 webpack-simple init 与 vue-cli 一起用于 vue 2.0。我在我的 Django 项目文件夹中创建了一个名为 frontend 的 vue 文件夹。目录结构：

$ tree 
├── README.md
├── asnew
│   ├── __init__.py
│   ├── migrations
│   ├── models.py
│   ├── settings.py
│   ├── templates
│       └── index.html
│   ├── urls.py
│   ├── views.py
│   ├── wsgi.py
├── frontend
│   ├── node_modules
│   ├── package.json
│   ├── src
│       ├── App.vue
│       ├── assets
│       ├── components
│       │   └── SearchPageResult.vue
│       ├── main.js
│       └── webpack.config.js
├── manage.py
├── media
├── requirements.txt
├── static
└── staticfiles

然后基本上在我的index.html Django 模板中我有以下代码：

<script src="{% static 'js/vue/build.js' %}"></script>
<div id="app"></div>

一旦渲染，它就会变成完整路径：

<script src="/static/js/vue/build.js"></script>

我使用npm run build 创建并验证确实确实由浏览器加载/导入。我将heroku CLI 作为开发服务器运行。

我是这样构建的：

$ cd frontend
$ npm run build

> vue-asnew@1.0.0 build /Users/me/MyProject/frontend
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: d5e16854b8f88beea3e9
Version: webpack 2.4.1
Time: 4503ms
       Asset     Size  Chunks             Chunk Names
    build.js  87.4 kB       0  [emitted]  main
build.js.map   718 kB       0  [emitted]  main

build.js.map不知道怎么办，我没用过。

但是，Vue 不起作用。虽然npm run build 没有出现错误，但我在控制台中看不到任何警告，我的指令（如v-bind）都不起作用，也无法从main.js 访问我的对象vm：

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

# adding "export" in front here doesn't help either -
# in browser console it doesn't see `vm` object
const vm = new Vue({
    el: '#app',
    render: h => h(App)
});

在控制台中作为vm（或只是Vue！）。

> vm
VM1256:1 Uncaught ReferenceError: vm is not defined
> Vue
VM1256:1 Uncaught ReferenceError: Vue is not defined

我的webpack.config.js 看起来像这样：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../static/js/vue/'),
    publicPath: '/js/vue/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

和npm run build 运行没有错误，所以我不确定发生了什么。

有什么想法吗？

【问题讨论】：

解决了吗？

标签： javascript django vue.js vuejs2 vue-loader

【解决方案1】：

npm run build 通常还会创建 index.html 文件，或者在您的情况下，它已经存在“webpack-simple”，它在关闭 body 标签之前包含 app.js 或 build.js。如果您在自己的 html 中包含 build.js，请尝试将其放在 <div id="app"></div> 之后和关闭 </body> 之前。

在底部包含脚本可确保首先加载实际页面内容；当最终下载脚本时，内容 (DOM) 将准备好供您的脚本操作。

如果你：

const vm = new Vue({
    el: '#app',
    render: h => h(App)
});

您无法在控制台中访问“vm”。在 main.js 中创建的任何变量都不会全局可用。如果您出于调试目的需要它，可以通过以下方式进行：

window.vm = new Vue({
  el: '#app',
  render: h => h(App)
});

然后你就可以在控制台中访问“vm”了。

【讨论】：

【解决方案2】：

正如您在 webpack-simple 模板的 index.html 文件中看到的，您应该在<div id="app"> 元素之后包含脚本：

https://github.com/vuejs-templates/webpack-simple/blob/master/template/index.html#L8-L9

没有全局Vueobject 的事实是意料之中的，因为您的捆绑应用程序没有公开它（也不应该公开）

【讨论】：