Vue.js는 "npm 빌드 실행"하지만 Vue.js는 DOM/작업에 구속되지 않음

Vue.js는 "npm 빌드 실행"하지만 Vue.js는 DOM/작업에 구속되지 않음

여기 Vue.js에 처음 왔어요.버전을 사용하는 Mac OS의 경우:

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

나는 이용하고 있어webpack-simpleInitvue 2.0의 vue-cli.나는 내 장고 프로젝트 폴더에서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.html장고 저는 다음과 같은 코드를 가지:템플릿.

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

렌더링되면 전체 경로로 바뀝니다.

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

내가 만들어 내는npm run build그리고 저는 실제로 브라우저에 의해 loaded/imported이 들어오나 확인했다.나는 달리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,저는 그것을 사용하지 않아요.

그러나, 뷰가 작동하지 않는다.내가 아무런 오류를 얻는다.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에러 없이 실행되기 때문에 무슨 일인지 잘 모르겠습니다.

좋은 생각 있어요?

npm run build도 보통 index.disc 파일을 만듭니다.또한 이 파일에는 app.discl 또는 build.discl이 본문 태그를 닫기 직전에 포함되어 있습니다.자신의 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'에 액세스할 수 있습니다.

webpack-simple 템플릿의 index.html 파일에서 볼 수 있듯이 다음 스크립트는<div id="app">요소:

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

글로벌하지 않다는 사실은Vue개체는 번들 앱에서 노출되지 않으므로 예상해야 함(및 노출되지 않아야 함)

언급URL : https://stackoverflow.com/questions/43672702/vue-js-npm-run-build-but-vue-js-not-bound-to-dom-working