Webpack Vue 2.0网页包“；“需要合适的装载机”；用于.vue文件中的模板

我很难通过启动的

vue cli

项目了解中的一些功能。我不想使用

webpack dev server

，因为我想使用自己的express应用程序来提供

index.html

文件和

build.js

文件。所以我决定从头开始用Webpack设置Vue 2.0

我在运行

webpack

时出错

ERROR in ./src/App.vue
Module parse failed: C:\node\aaaaa\customer\src\App.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template lang="html">
|   <div id="app">
|     <h1>This is from App.vue</h1>
 @ ./src/main.js 2:0-27

App.vue

和

main.js

与

vue cli

版本保持相同

这是我的

package.json

依赖项，它与原来的vue cli依赖项不同，它没有安装

webpack dev server

、

cross-env

和

文件加载器

"dependencies": {
  "vue": "^2.1.0"
},
"devDependencies": {
  "babel-core": "^6.0.0",
  "babel-loader": "^6.0.0",
  "babel-preset-es2015": "^6.0.0",
  "css-loader": "^0.25.0",
  "vue-loader": "^10.0.0",
  "vue-template-compiler": "^2.1.0",
  "webpack": "^2.1.0-beta.25"
}

我的

webpack.config.js

不包含我认为不必要的vue cli版本的某些部分

module.exports = {
  entry: './src/main.js',
  output: {
    path: __dirname + '/dist',
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        include: './src',
        options: {
          // vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: './src',
        exclude: /node_modules/,
        query: { //https://github.com/babel/babel-loader
          presets: ['es2015']
        }
      }
    ]
  }
};

来自

vue cli

项目的

webpack.config.js

文件是：

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

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // 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.common.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  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
    })
  ])
}

---

任何帮助都将不胜感激。如果您能告诉我一个地方，在那里我可以学习使用

vue cli

脚手架项目和

express

，而不必使用

webpack dev server

，那就太好了

不是答案，但您不必离开

webpack dev server

，相反，您可以将express配置为服务已编译的静态文件，并使前端dev server代理express的服务器，这样您就不会错过诸如监视和重新编译之类的好功能。@PanJunjie潘俊杰 那正是我最终要做的，而且那更好！现在，为了进行开发，我使用webpack dev server，并使用带有“允许跨源”标题的Express API。在生产中，我将使用API本身发送文件，因此我可以不使用标题：）感谢您的评论：）您是否使用我建议的“代理”？如果是，那么就不应该有CORS问题，因为文件和API结果都将“来自”开发服务器。为了确保“代理”的方式正确，如果您没有添加代理，只要您记得删除标题，也没关系。@PanJunjie潘俊杰 我无法为“前端”build.js提供服务，因为webpack dev server使用内存来存储和服务文件，而express api需要访问应该包含build.js的dist文件夹。我可以在vue cli项目中执行“npm运行构建”，该项目为生产构建，并使用build.js创建一个dist文件夹，my express可以将该文件夹发送到浏览器。但这仅仅意味着一次又一次地“建造”。这是我最初面临的问题，这就是为什么我开始在没有webpack dev server的情况下从头开始设置vue。因此，我暂时使用了CORS头。这不是答案，但你不必离开

webpack dev server

，相反，你可以将express配置为提供已编译的静态文件，并使前端dev server代理express的服务器，这样你就不会错过诸如监视和重新编译之类的好功能。@PanJunjie潘俊杰 那正是我最终要做的，而且那更好！现在，为了进行开发，我使用webpack dev server，并使用带有“允许跨源”标题的Express API。在生产中，我将使用API本身发送文件，因此我可以不使用标题：）感谢您的评论：）您是否使用我建议的“代理”？如果是，那么就不应该有CORS问题，因为文件和API结果都将“来自”开发服务器。为了确保“代理”的方式正确，如果您没有添加代理，只要您记得删除标题，也没关系。@PanJunjie潘俊杰 我无法为“前端”build.js提供服务，因为webpack dev server使用内存来存储和服务文件，而express api需要访问应该包含build.js的dist文件夹。我可以在vue cli项目中执行“npm运行构建”，该项目为生产构建，并使用build.js创建一个dist文件夹，my express可以将该文件夹发送到浏览器。但这仅仅意味着一次又一次地“建造”。这是我最初面临的问题，这就是为什么我开始在没有webpack dev server的情况下从头开始设置vue。因此，我暂时求助于使用CORS头文件。

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

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // 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.common.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  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
    })
  ])
}