vue-cli3.x 配置vue.config.js

vue-cli 3.x 的一些常用配置

邱先生~

3048人浏览 · 2019-08-08 17:34:21

邱先生~ · 2019-08-08 17:34:21 发布

vue.config.js常用配置项

1.publicPath
2.outputDir
3.assetsDir 静态文件路径
 4.indexPath
5.filenameHashing
6.pages 配置多页面
 7.lintOnSave
8.runtimeCompiler
9.configureWebpack
10.css相关配置
 11.devServer
12.完整的vue.config.js的配置

https://cli.vuejs.org/zh/config/

高亮的是我认为比较常用的~~

1.publicPath 部署应用包时的基本 URL

Type: string
Default: ‘/’

用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 www.my-app.com。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 www.my-app.com/my-app
则设置 publicPath 为 /my-app/。

这个值也可以被设置为空字符串 (’’) 或是相对路径 (’./’)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。

相对 publicPath 的限制

相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:
当使用基于 HTML5 history.pushState 的路由时；
当使用 pages 选项构建多页面应用时。

module.exports = {
  /* 部署应用包的基本URL */
  /* baseUrl 从 Vue CLI 3.3 起已弃用 ，请使用publicPath */
  //  baseUrl: process.env.NODE_ENV === "production" ? "./" : "./",
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",


}

2.outputDir 打包输出的文件目录默认为dist 可不用设置

Type: string
Default: ‘dist’

module.exports = {
/* 生产环境构建文件的目录 defalut: dist */
	outputDir:'dist' 默认就是dist 如果不需要更改打包的输出文件名称 这个配置项可不用配置
}

3.assetsDir 静态文件路径

Type: string
Default: ‘’

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

module.exports = {
  /* 放置生成的静态文件目录（js css img） */
	assetsDir:'static' 
}

4.indexPath

Type: string
Default: ‘index.html’

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

module.exports = {
  /* 指定生成的index.html 输出路径 相对 default: index.html */
	indexPath:'index.html' 
}

5.filenameHashing

Type: boolean
Default: true

默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。

module.exports = {
   /* 指定生成文件名中包含hash default: true */
  filenameHashing: true,
}

6.pages 配置多页面

Type: Object
Default: undefined

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

一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
或一个指定其 entry 的字符串。

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: ["chunk-vendors", "chunk-common", "index"]

    },

    // 当使用只有入口的字符串格式时，

    // 模板会被推导为 `public/subpage.html`

    // 并且如果找不到的话，就回退到 `public/index.html`。

    // 输出文件名会被推导为 `subpage.html`。

    // subpage: "src/subpage/main.js"

  }
}

7.lintOnSave 是否保存时 lint 代码

Type: boolean | ‘error’
Default: true

module.exports = {
   /* 是否保存时 lint 代码 */
  lintOnSave: false,
  }

8.runtimeCompiler 是否使用编译器

Type: boolean
Default: false
是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。

module.exports = {
   /*  是否使用编译器*/
  runtimeCompiler: false,
  }

9.configureWebpack

Type: Object | Function

module.exports = {
  configureWebpack: {
     resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
        'views': '@/views',
      }
    }
  }
  }

css相关配置

module.exports = {
 // css相关配置

  css: {

    // 是否使用css分离插件 ExtractTextPlugin
    //是否将组件中的 CSS 提取至一个独立的 CSS 文件中
    //Default: 生产环境下是 true，开发环境下是 false

    extract: true,

    //是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
    //Default: false

    sourceMap: false,

    // css预设器配置项 Default: {}

    loaderOptions: {
	 // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "~@/variables.scss";`
      }
	},

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

  },
}

devServer

Type: Object

所有 webpack-dev-server 的选项都支持。注意：

有些值像 host、port 和 https 可能会被命令行参数覆写。
有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作

module.exports = {
devServer: {

    port: 8080,

    host: "0.0.0.0",

    https: false,

    // 自动启动浏览器

    open: false,

    proxy: {
      "/api": {
          //代理路径 例如 https://baidu.com
          target:  "https://baidu.com",
          // 将主机标头的原点更改为目标URL 
          changeOrigin: true, 是否跨域
          ws: true, 
          //pathRewrite: {
            //"^/api": ""
          //}
        }
    }

  }

}

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

完整的vue.config.js的配置

vue.config.js文件


const webpack = require("webpack");
module.exports = {

  /* 部署应用包的基本URL */
  /* baseUrl 从 Vue CLI 3.3 起已弃用 ，请使用publicPath */
  //  baseUrl: process.env.NODE_ENV === "production" ? "./" : "./",
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",

  /* 生产环境构建文件的目录 defalut: dist */

  outputDir: "dist",

  /* 放置生成的静态文件目录（js css img） */

  assetsDir: "static",

  /* 指定生成的index.html 输出路径 相对 default: index.html */

  indexPath: "index.html",

  /* 指定生成文件名中包含hash default: true */

  filenameHashing: true,

  /* 多页模式下 */

  /* 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: ["chunk-vendors", "chunk-common", "index"]

    },

    // 当使用只有入口的字符串格式时，

    // 模板会被推导为 `public/subpage.html`

    // 并且如果找不到的话，就回退到 `public/index.html`。

    // 输出文件名会被推导为 `subpage.html`。

    // subpage: "src/subpage/main.js"

  } */

  /* 是否保存时 lint 代码 */

  lintOnSave: process.env.NODE_ENV === "production",

  /* 是否使用编译器 default: false */

  runtimeCompiler: false,

  /* 默认babel-loader会忽略node_modules中的文件，你想显示的话在这个选项中列出来 */

  // transpileDependencies: [],

  /* 生产环境的source map */

  productionSourceMap: true,

  // crossorigin: "",

  integrity: false,
  
  configureWebpack: {
     resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
        'views': '@/views',
      }
    }
  }

  // css相关配置

  css: {

    // 是否使用css分离插件 ExtractTextPlugin

    extract: true,

    // 开启 CSS source maps?

    sourceMap: false,

    // css预设器配置项

    loaderOptions: {},

    // 启用 CSS modules for all css / pre-processor files.

    modules: false

  },

  devServer: {

    port: 8080,

    host: "0.0.0.0",

    https: false,

    // 自动启动浏览器

    open: false,

    proxy: {
      "/api": {
          //代理路径 例如 https://baidu.com
          target:  "https://baidu.com",
          // 将主机标头的原点更改为目标URL
          changeOrigin: true,
          ws: true,
          pathRewrite: {
            "^/api": ""
          }
        }
    }

  }

};

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^