vue+webpack搭建项目及那些错误

搭建项目:

1.vue-loader + wepack项目配置:

1)新建一个项目文件夹并初始化

npm init

2)下载相关配置:

npm i webpack vue vue-loader css-loader vue-template-compiler --save-dev

3)在根目录下新建一个src文件夹在src中新建webpack.config.js 和app.vue以及相关文件

webpack.config.js最终文件内容为

const path = require('path')
// Vue Loader v15 now requires an accompanying webpack plugin to function properly:
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

const isDev = process.env.NODE_ENV === 'development'

const config = {
  mode: process.env.NODE_ENV,
  target: 'web',
  entry: {
    main: path.resolve(__dirname, 'src/index.js')
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.(gif|jpg|jpeg|png|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              names: '[name].[ext]' // 图片名字
            }
          }
        ]
      },
      {
        test: /\.styl/,
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new VueLoaderPlugin(),
    new HTMLPlugin({
        filename: '[name]-[hash].html',
        template: './index.html',               // 会与根目录下的index.html相关联，把根目录下index的东西都放到生成的HTML中
        inject: true 
    })
  ]
}
console.log(isDev, 'isDev')
if (isDev) {
  config.devtool = '#cheap-module-eval-source-map'
  config.devServer = {
    port: 8000,
    host: '0.0.0.0',
    overlay: {
      errors: true
    },
    hot: true
    // historyFallback: {

    // }
    // open: true
  }
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )
}
module.exports = config

 

报错:

1,对项目进行打包时,出现下面错误

Unexpected end of JSON input while parsing near '...9071","tarball":"http'

解决方法:

将npm版本降级

当前版本:

node v10.8.0
npm  v6.2.0

npm指定版本命令:

npm i -g npm@4

报错2,已经下载vue-loader插件依然报错不能识别.vue文件

解决方法:

// webpack.config.js

// Vue Loader v15 now requires an accompanying webpack plugin to function properly:
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

报错3,正npm run dev等待成功的时候,突然报错,桑心....从表面的意思来看错误的提示是说'没有结束的字符串常量' 找了半天终于找到了,如下下

ERROR in bundle.js from UglifyJs
Unterminated string constant [bundle.js:1163,17]

解决办法:

// webpack.config.js

// "development"和"production"外层一定记得再加单引号,才能算是字符串
new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    })