@Vue/CLI 4 的配置方法

下载安装

https://cli.vuejs.org/zh
默认不会暴露webpack.config.js文件，但是可以在根目录下面新建一个vue.config.js文件，配置自己需要的东西

查看当前版本

$ vue -V
@vue/cli 4.5.7

node版本

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
由于 Node.js v8 已不再维护，我们建议使用 Node.js v10 以上的版本，以保证最佳的兼容性。

创建一个新项目

vue create hello-world

新建项目示例，第一个选项为默认，第二个选项为自定义

自定义项目选项

或者使用 vue ui 创建

使用vue ui创建项目

拉取旧版本

# Vue CLI >= 3 和旧版本的创建命令 vue 发生了冲突，它会覆盖旧版本的创建，
# 如果需要创建旧版本，可以安装一个新的桥接工具
npm install -g @vue/cli-init

# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

配置参考

1. 打包模式

• 默认是生产模式，开发模式需要指定类型
• 开发模式，package.json里面配置模式，"devbuild": "vue-cli-service build --mode development"

2. 配置环境变量

你可以替换你的项目根目录中的下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略，只在本地有效
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略，只在本地有效

    根目录下面新建名为 .env 的文件，里面是全局环境变量， .env.development 开发环境变量， .env.production 生成环境变量
    只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们`console.log(process.env.VUE_APP_SECRET);`
    在构建过程中，process.env.VUE_APP_SECRET 将会被相应的值所取代。在 VUE_APP_SECRET=secret 的情况下，它会被替换为 "secret"
   除了 **`VUE_APP_*`** 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

3. 出口 outputDir

Type: string
Default: 'dist'

module.exports = {
    outputDir: 'leo',
    // 区分不同的环境打不同包名，这里NODE_ENV指代的是模式名称
    // outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist', 
}

    当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。

提示
请始终使用 outputDir 而不要修改 webpack 的 output.path。

这里要遵循Vue配置的写法，不要使用webpack配置的写法

4. 输出路径 pubilcPath

module.exports = {
    publicPath: "/"
}

相对 publicPath 的限制

相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:

当使用基于 HTML5 history.pushState 的路由时；
当使用 pages 选项构建多页面应用时。

5. 入口 pages

Type: Object
Default: undefined

module.exports = {
    pages: {
        index: {
            // page 的入口
            entry: 'src/index/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            // chunks 对应着 webpack配置中的 HtmlWebpackPlugin 插件中的chunks选项
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        subpage: 'src/subpage/main.js'
    }
}

在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：

一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
不止上面的5个属性，盲猜和打包生成的index.html有关的大部分都可以（至少favicon，inject可以）
或一个指定其 entry 的字符串。

6. CSS相关

Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。

css.moudles

不建议使用，@vue/cli4 开始已经禁用，建议使用下面的css.requireModuleExtension
<a name="tloKW"></a>

css.requireModuleExtension css模块处理

Type: boolean
Default: true

默认只有只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。

css.extract 样式分离

Type: boolean | Object
Default: 生产环境下是 true，开发环境下是 false

是否将css单独提取到一个css文件中，false的状态下会将样式写在style标签里面

css.sourceMap 是否为css开启source map，默认false

当开启了css.extract时，不建议再开启css.sourceMap，因为css.extract会把提取出来的css样式进行打包压缩成为一行。

css.loaderOptions 向css相关loader传递选项，默认 {}

module.exports = {
  css: {
    loaderOptions: {
      // 这里的选项会传递给 css-loader
        css: {
        // 配置 CSS Modules 的class命名规则
        modules: {
          localIdentName: '[local]_[hash:base64:8]'
        }
      },
      // 这里的选项会传递给 postcss-loader
      postcss: {
        
      },
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData: `@import "~@/variables.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `data` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: `@import "~@/variables.scss";`
      },
      // 给 less-loader 传递 Less.js 相关选项
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

7. webpack原生配置

调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

    该对象将会被 [webpack-merge](https://github.com/survivejs/webpack-merge) 合并入最终的 webpack 配置。

警告
有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；你应该修改 vue.config.js 中的 publicPath 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

8. assetsDir 静态资源存放

Type: string
Default: ''

放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

9. indexPath 输出文件路径

Type: string
Default: 'index.html'
指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。

可以用它来修改输出文件的名称。

10. filenameHashing 是否添加哈希值

Type: boolean
Default: true
默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。可以将该属性设置为false，来去除静态资源文件名称里面的哈希值。

11. devServer 临时服务器

通过devServer，可以在nodejs架设一个临时服务器用于项目的运行和调试

module.exports = {
  // webpack-dev-server 相关配置
  devServer: {
    open: true,  //自动打开浏览器
    openPage: '/index/page',  //指定devserver编译完成后打开的页面
    compress: true,  //是否对devServer所有服务启用gzip压缩
    headers: {
            'X-Custom-Foo': 'bar'  //在所有的响应中添加首部内容
    },  
    overlay: true,  // 浏览器是否全屏覆盖编译时出现的错误或警告
    inline: true,  // 保存代码时是否自动刷新页面
    host: '0.0.0.0', // 允许外部ip访问
    port: 8024, // 端口
    https: false, // 是否启用https
    proxy: {
        '/api': {
                target: 'http://127.0.0.10:3000', //target是必须参数
            ws: true, //是否启动websocket
            secure: true, //是否使用HTTPS协议，默认false
            changeOrigin: true, //是否允许跨域，将主机头的来源更改为目标URL，
            // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
            pathRewrite: {"^/api": ""} // 重写URL的path部分
        }
    }
  }
}

注意：

openPage需要配合open属性使用，默认打开首页。
另外，如果vue-router使用的是hash路由，记得添加#
openPage也可以指定打开多个页面，openPage: ['/index/page1', '/index/page2']

12. pluginOptions

Type: Object

这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项。

module.exports = {
  pluginOptions: {
    foo: {
      // 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
    }
  }
}

13. Babel

Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不同，这个配置文件不会使用基于文件位置的方案，而是会一致地运用到项目根目录以下的所有文件，包括 node_modules 内部的依赖。我们推荐在 Vue CLI 项目中始终使用 babel.config.js 取代其它格式。

现代模式

虽然大部分前沿浏览器都能运行ES2015+代码，开发过程难免需要兼容低版本浏览器。因此，我们还是需要使用polyfill将代码编译成ES5的语法。
因此，兼容成了让人头疼的事。虽然我们可以使用Babel来兼容所有的语言特性，但是交付转译和polyfill后的包通常比原生的代码更加的冗长，运行更慢。所以因为要支持更老的浏览器而为它们交付笨重的代码是一种浪费。
然而，这在新版的vue/cli中，已经不再是问题了，Vue CLI 提供了一个"现代模式"解决了这个问题。
我们在命令中使用 --modern模式，可以快速打包现代模式。

vue-cli-service build --modern

Vue CLI 会产生两个应用的版本：一个现代版的包，面向支持 ES modules 的现代浏览器，另一个旧版的包，面向不支持的旧浏览器。
最酷的是这里没有特殊的部署要求。其生成的 HTML 文件会自动使用 Phillip Walton 精彩的博文中讨论到的技术：

现代版的包会通过 <``script`` type="``module``"></``script``> 在被支持的浏览器中加载；它们还会使用 <link rel="modulepreload"> 进行预加载。
旧版的包会通过 <``script`` nomodule> 加载，并会被支持 ES modules 的浏览器忽略。
一个针对 Safari 10 中 <``script`` nomodule> 的修复会被自动注入。

注意：<``script`` type="``module``"></``script``>会产生跨域问题，需要配合始终开启的CORS进行加载。这意味着你的服务器必须返回诸如 Access-Control-Allow-Origin: * 的有效的 CORS 头。

参考文章： 1. Vue CLI 官方文档
 2. VueCLI4.0 webpack 配置属性讲解
 3. 关于Vue-cli3.0配置中的pages.chunks的参数的意义