Question

我尝试使用webpack运行vue但是当我运行webpack时，index.html显示一个空白页面。我的代码出错了吗？

的index.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue Example</title>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <script src="dist/build.js"></script>
  </body>
</html>

//main.js
import Vue from 'vue'

var a = new Vue({
  el: '#app',
  data: {
    message: "i know you"
  }
})

。

//webpack.config.js
module.exports = {
    // This is the "main" file which should include all other modules
    entry: './src/main.js',
    // Where should the compiled file go?
    output: {
        // To the `dist` folder
        path: './dist',
        // With the filename `build.js` so it's dist/build.js
        filename: 'build.js'
    },
    module: {
        // Special compilation rules

        loaders: [
            {
                // Ask webpack to check: If this file ends with .js, then apply some transforms
                test: /\.js$/,
                // Transform it with babel
                loader: 'babel',
                // don't transform node_modules folder (which don't need to be compiled)
                exclude: /node_modules/

            }
        ]
    }
}

Answer 1

使用VUE时，WebPack本身的配置非常人性化，但对于初学者来说，很容易出错。导致项目出错，就像你没有走出页面一样。

在使用vue的项目中，个人不建议单独配置webpack和vue-loader。你可以直接使用vue官方脚手架，vue-cli。不必考虑这些配置，自动配置。

vue-cli

如果您刚刚开始学习Vue，那么这是一个入门级演示。虽然它只是一个小应用程序，但它涵盖了很多知识点（vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack），包括前端，后端，数据库和其他网站对于我来说，学习重要意义的一些必要元素，希望互相鼓励！

Vue Demo

用webpack运行vue

1 个答案: