Vue.js "npm run build", but Vue.js is not tied to DOM / working

Question

New to Vue.js here. On Mac OS using versions:

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

I am using init webpack-simple with vue-cli for vue 2.0. I created a folder in my Django project folder for vue called frontend . Directory structure:

 $ 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 

Basically in my Django index.html template, I have the following code:

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

After rendering, this turns into the full path:

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

which I create with npm run build and I checked if it really loads / is imported by the browser. I run the heroku CLI as devserver.

I build like this:

 $ 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 

I do not know what to do with build.js.map , I do not use it.

HOWEVER, Vue is not working. While I am not getting errors with npm run build , I do not see any warnings in my console, not one of my directives like v-bind , and I cannot access my vm object from 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) }); 

like vm (or just Vue !) in the console.

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

My webpack.config.js looks like this:

 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 }) ]) } 

and npm run build works without errors, so I'm not sure what is going on.

Any ideas?

Answer 1

npm run build usually also creates the index.html file or in your case "webpack-simple" is already present in which it includes app.js or build.js before closing the body tag. If you included build.js in your own HTML file, try placing it after <div id="app"></div> and before closing </body> .

Enabling scripts below ensures that the contents of the page are loaded first; when the scripts are finally loaded, the content (DOM) will be ready to work with your scripts.

Also, if you:

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

you cannot access "vm" in the console. Any variable created inside main.js will not be available worldwide. If you need it for debugging, you can do it like this:

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

And then you can access the "vm" in the console.

Answer 2

As you can see in the index.html file of a simple webpack template, you should include the script after the <div id="app"> element:

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

The fact that the Vue global object does not exist, since the application of your package does not open it (and should not)