怎样通过已经使用过webpack+vue+vueRouter+vuecli的配置文件package.json创建一个项目

Posted 2020-10-03

首先，我们自己得手动创建一个webpack+vue+vueRouter+vuecli工程，执行下面：
如：
新建一个vue项目,创建一个基于"webpack"的项目,项目名为vuedemo：

$ vue init webpack vuedemo

安装完成后进入工程名称再根据原来项目的配置文件初始化

$ cd vuedemo
$ npm install

但是由于在新建的时候对eslint的选择中选择了Yes,所以后面根据配置package.json的时候，发现没有eslint-friendly-formatter 模块，由于原来的工程应该没有配置这个，所以这儿需要安装下，如下代码：

npm i -D eslint eslint-friendly-formatter

模块地址：https://www.npmjs.com/package/eslint-friendly-formatter

安装后执行:npm run dev 发现运行起来的页面没有启动起来，原因是还是这个eslint引起的。

出错信息为：

These relative modules were not found：
*/build/dev-client in multi ./build/dev-client ./src/main.js，
*./src/main.js in multi ./build/dev-client ./src/main.js

原因如下：
webpack.base.conf.js里面，脚手架本来就有 js的编译模块：

 {
        test: /\.js$/,
        loader: ‘babel-loader‘,
        include: [resolve(‘src‘), resolve(‘test‘)]
      }

我们需要注释掉这段代码：

//    {
//      test: /\.(js|vue)$/,
//      loader: ‘eslint-loader‘,
//      enforce: ‘pre‘,
//      include: [resolve(‘src‘), resolve(‘test‘)],
//      options: {
//        formatter: require(‘eslint-friendly-formatter‘)
//      }
//    },

原因就是导致重复编译，所以应该就有两个main.js文件。所以不要重复出现匹配规则就可以。
然后运行npm run dev可以了。
相似问题：vue-cli安装完成之后，命令行npm run dev没有问题，但webstorm报错