在vue项目中配置webpack

首先我们来看一下使用Vue-cli2与Vue-cli2之后的版本(这里以Vue-cli4版本为例)创建项目目录结构的不同：

Vue-cli2（左图）与Vue-cli4（右图）创建项目的目录

从上图可以看出Vue-cli2中有static文件夹，Vue-cli4是移除了static文件夹，但新增了public文件夹，并将index.html文件移动到了public中，这是其区别之一，另外Vue-cli2创建的项目其配置文件存放在build和config文件夹中，而Vue-cli4创建的项目没有这两个文件夹，那是不是真的没有了配置文件呢？当然不是，你想想如果没有配置文件了，那项目如何能够运行呢，其实只是将配置文件隐藏了而已。

那要如何查看配置文件呢？

配置文件隐藏在node_modules/@vue/cli-service中，打开这个文件夹，你就可以看到webpack.config.js配置文件了，但是并不推荐你在这里面进行webpack的相关配置，通常我们的做法是在项目的根目录下创建一个vue.config.js的配置文件，在这个文件中进行webpack的配置，因为在运行项目时，会先看是否有这个文件，如果有的话会将这个文件与隐藏的配置文件合并。

下面以配置文件夹别名和配置本地服务为例：

1.配置文件夹别名

为什么要给文件夹配置别名呢？有没有这个疑惑？首先当然是为了方便，因为在引用某个文件时需要给出其路径，但如果路径过长，就可能会出错了，而且还不优雅美观。直接贴代码：

module.exports = {
  configureWebpack: {
    // resolve是配置与路径相关的
    resolve: {
      extensions: ['.js', '.vue', '.json'],  // 省略文件后缀名
      // 配置别名
      alias: {
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views',
      }
    }
  }
}

是不是有点疑惑@是个什么东西呢？@是代表的是src目录的别名，在隐藏的配置文件中有这个配置。

2.配置本地服务

module.exports = {
  configureWebpack: {
    // 配置本地服务器
    devServer: {
      compress: true,  // 启用压缩，代码占用的空间少，在互联网传输快
      port: 8080,  // 设置打开的端口
      host: '127.0.0.1',  // host
      hot: true,  // 热启动
      open: true,  // 浏览器自动打开
      // 服务器代理，实现跨域访问接口
      proxy: {
        '/api': {
          target: '要访问目标的地址', //接口地址
          ws: true, //是否开启websockets
          changOrigin: true, //允许跨域  
          pathRewrite: {
            '^/api': '' //路径重写
          }
        }
      }
    },
  }
}

注意：在配置vue.config.js后需要重新编译，才会生效,否则就不会起作用哟。