vue vuecli2 和 vuecli3 的区别

前言：最近做项目发现一个问题，我的项目运行后在终端输出的内容是：

运行其他项目输出的内容是：

对比发现没有network，上网查找资料发现是因为运行配置文件不同导致的。

查看vue版本

vue -V
vue --version

项目目录结构的区别：

vue cli2:没有vue.config.js文件，有build和config文件

vue cli3有vue.config.js文件，移除了build和config文件，同时移除了 static 静态文件夹，新增了 public 文件夹，打开层级目录还会发现，index.html 移动到 public 中

package.json文件的区别：

npm run dev运行输出内容的区别：

vue cli2是通过webpack-dev-server来运行的，vue cli3是通过vue-cli-service来运行的

如果想要配置network，首先找到build文件夹下的webpack.dev.conf.js文件，更改messages中的内容

compilationSuccessInfo: {
          messages: [
            `App running: `,
            `Local:  http://${devWebpackConfig.devServer.host}:${port}`,
            `Network: http://${require('ip').address()}:${port}`,
          ]
        },
      }))

在config下的index.js 找到dev，添加public

public:'192.168.x.xx'//ip地址

在package.json中的script的dev，添加--host 0.0.0.0

--host 后面是public地址，你电脑的ip地址，重新运行就可以了！