간단한 vue 설정으로 GET/입력 할 수 없습니다.

Question

그래서 간단한 vue 프로젝트를 설정하려고합니다. Webpack은 컴파일 할 수는 있지만 홈페이지를 제공 할 수는 없습니다.

https://github.com/vuejs-templates/webpack-simple

Answer 1

이 VUE 라우터 예를 보면 : 내가 가진

https://github.com/kenpeter/auto_complete_vue

npm run dev 

오류이 템플릿을 기반으로

이

Cannot GET/

입니다 : 여기에 REPO입니다 :

https://github.com/vuejs/vue-router/blob/dev/examples/basic/app.js#L29

하기 :

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

가되어야한다

el: "#app" 그래서 난이이 경로를받지 못하고있어 문제라고 생각하기 전에

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

당신이 볼 수있는 라우터이다.

Answer 2

// publicPath : '/ dist /', publicPath를 주석 처리합니다. 현재 작동하지만, 이유를 모르겠습니다.

누군가가 설명 할 수 있습니까?

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

// html plugin class 
const HtmlWebpackPlugin = require('html-webpack-plugin') 

// html plugin instance 
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    // client has template 
    template: './client/index.html', 
    // out is index html 
    filename: 'index.html', 
    // inject body 
    inject: 'body' 
}) 

module.exports = { 
    // Input 
    entry: './client/index.js', 
    // Output 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    //publicPath: '/dist/', 
    filename: 'build.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
      loaders: { 
      // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 
      // the "scss" and "sass" values for the lang attribute to the right configs here. 
      // other preprocessors should work out of the box, no loader config like this necessary. 
      'scss': 'vue-style-loader!css-loader!sass-loader', 
      'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 
      } 
      // other vue-loader options go here 
     } 
     }, 
     { 
     // babel 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
     }, 
     { 
     // img 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'file-loader', 
     options: { 
      name: '[name].[ext]?[hash]' 
     } 
     } 
    ] 
    }, 

    // plugin for array, module for obj 
    plugins: [ 
    HtmlWebpackPluginConfig 
    ], 

    resolve: { 
    // es module == esm 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js' 
    } 
    }, 

    devServer: { 
    // History api 
    historyApiFallback: true, 
    noInfo: true, 
    overlay: true 
    }, 

    performance: { 
    // no hint 
    hints: false 
    }, 

    // source map 
    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([ 
    // env 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: '"production"' 
     } 
    }), 
    // mini js 
    new webpack.optimize.UglifyJsPlugin({ 
     sourceMap: true, 
     compress: { 
     warnings: false 
     } 
    }), 
    // other mini 
    new webpack.LoaderOptionsPlugin({ 
     minimize: true 
    }) 
    ]) 
}