关于vue.config.js配置

关于vue.config.js配置

在平时vue项目中,我们逐渐开始需要自己配置一下config配置。接下来的内容作为我自己学习查阅vue.config.js的官方文档对常用的配置小做笔记。

官方文档网址https://cli.vuejs.org/zh/config/#vue-config-js

什么是vue.config.js

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。

module.exports = {
  // 选项...
}

vue.config.js的配置项

publicPath部署应用包时的基本 URL

  • 类型: string
  • 默认值: '/'

部署应用包时的基本 URL。请始终使用 publicPath 而不要直接修改 webpackoutput.publicPath

publicPath的应用情况:

  • 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath/my-app/
  • 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径。

outputDir打包后生成的文件夹目录

  • 类型: string
  • 默认值: 'dist'

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

assetsDir放置生成的静态资源的目录

  • 类型: string
  • 默认值:

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

indexPath生成的 index.html 的输出路径

  • 类型: string
  • 默认值: 'index.html'

filenameHashing文件名是否包含哈希

  • Type: boolean
  • Default: true

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

pages

  • Type: Object
  • Default: undefined

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

  • 一个指定了 entry, template, filename, titlechunks 的对象 (除了 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 标签需要是 <%= htmlWebpackPlugin.options.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'
  }
}

devServer

  • Type: Object

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

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

devServer.proxy

  • Type: string | Object

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

    devServer.proxy 可以是一个指向开发环境 API 服务器的字符串:

    module.exports = {
      devServer: {
        proxy: 'http://localhost:4000'
      }
    }
    

    这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000

    如果你想要更多的代理控制行为,也可以使用一个 path: options 成对的对象。完整的选项可以查阅

    module.exports = {
      devServer: {
        proxy: {
          '/api': {
            target: '',
            ws: true,
            changeOrigin: true
          },
          '/foo': {
            target: ''
          }
        }
      }
    }
    

附上我目前的配置

module.exports = {
    publicPath: "./", // 公共路径 默认为"/",建议使用"./"相对路径
    devServer: {   // 本地服务器配置(npm run serve)
      port: 8080, // 端口
      host: "localhost", // 域名
      https: false, // 是否开启https
      open: true	// 是否在开启服务器后自动打开浏览器访问该服务器
    },
    lintOnSave: false,  // 取消lint语法检测,此处可不配置
    outputDir:"dist", // build打包输出目录
    assetsDir:"assets", // 静态文件输出目录,基于dist
    indexPath: "index.html",  // 输出html文件名
    productionSourceMap: false, // 取消.map文件的打包,加快打包速度
    configureWebpack: (config) => {
      // process.env为环境变量,分别对应.env.development文件和.env.production文件 此处表示加快开发环境打包速度
      if (process.env.NODE_ENV !== 'production') return;
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = false;	//生产环境去掉console.log
      return {  // 此处配置webpack.config.js的相关配置
        plugins: [],
        performance: {}
      };
    }
};

你可能感兴趣的:(vue.js,javascript)