复制项目到自己电脑npm run dev报错

87 阅读 0 评论 58 点赞

我是靠谱客的博主现代裙子，这篇文章主要介绍复制项目到自己电脑npm run dev报错，现在分享给大家，希望可以做个参考。

最近发生一件很奇怪的事情，我同时复制两个项目在同一文件夹下，一个项目可正常运行另一个项目则有千奇百怪的错误，下面来总结一下复制到自己电脑无法正常运行的解决方法（自己亲测有效）
1.我只要用npm安装所有的模块都进行报错我安装了cnpm
首先输入

复制代码

1
2
npm config get proxy

复制代码

1
2
npm config get https-proxy

确保两个值都为null
如果不为null操作下一步

复制代码

1
2
npm config set proxy null

复制代码

1
2
npm config set https-proxy null

接下来

复制代码

1
2
npm config set registry http://registry.cnpmjs.org/

安装cnpm

复制代码

1
2
npm install -g cnpm --registry=https://registry.npm.taobao.org

现在安装可以解决
提示安装什么就进行安装
2.配置VueLoaderPlugin
在vue.base.conf.js中配置

复制代码

1
2
const VueLoaderPlugin = require('vue-loader/lib/plugin')

复制代码

1
2
3
4
 plugins: [
    new VueLoaderPlugin()
  ]

下面是整体代码

复制代码

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const babel = require('babel-polyfill')
var webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ['babel-polyfill', './src/main.js']
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production' ?
      config.build.assetsPublicPath : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      vendor: path.resolve(__dirname, '../src/vendor') //新增加一行
    }
  },
  module: {
    rules: [{
        test: /.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/webpack-dev-server/client')
        ]
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        use: [{
            loader: 'url-loader',
            options: {
              // limit: 10000,
              limit: 1000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          // 图片压缩的
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true
            }
          }
        ]
      },
      {
        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: 'url-loader',
        options: {
          // limit: 10000,
          limit: 1000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery'
    }),
    new VueLoaderPlugin()
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const babel = require('babel-polyfill')
var webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')


function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ['babel-polyfill', './src/main.js']
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production' ?
      config.build.assetsPublicPath : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      vendor: path.resolve(__dirname, '../src/vendor') //新增加一行
    }
  },
  module: {
    rules: [{
        test: /.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/webpack-dev-server/client')
        ]
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        use: [{
            loader: 'url-loader',
            options: {
              // limit: 10000,
              limit: 1000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          // 图片压缩的
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true
            }
          }
        ]
      },
      {
        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: 'url-loader',
        options: {
          // limit: 10000,
          limit: 1000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery'
    }),
    new VueLoaderPlugin()
  ]
}