Vue.js"npm run build"但是Vue.js没有绑定DOM /工作

Question

来自Vue.js的新手.在Mac OS上使用版本:

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

我正在使用webpack-simpleinit和vue-cli for vue 2.0.我在我的Django项目文件夹中创建了一个文件夹,用于调用vue frontend.目录结构:

$ 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.htmlDjango模板中我有以下代码:

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

一旦渲染,这将变成完整的路径:

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

我创建的npm run build,我验证确实实际上是由浏览器加载/导入.我将herokuCLI作为devserver 运行.

我是这样构建的:

$ 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工作,也可以访问我的对象vm从main.js:

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运行没有错误,所以我不知道发生了什么.

有任何想法吗？

Answer 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'.