vue.config.js 配置整理

最新推荐文章于 2024-05-10 17:47:21 发布

妖孽白小白

最新推荐文章于 2024-05-10 17:47:21 发布

阅读量577

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_43720804/article/details/123370866

版权

本文详细梳理了Vue CLI的配置文件vue.config.js，涵盖了官方网址提供的各项配置选项，旨在帮助开发者更好地理解和定制Vue项目的构建过程。

摘要由CSDN通过智能技术生成

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

const {
   defineConfig} = require('@vue/cli-service'); //@vue/cli-service 提供的 defineConfig 帮手函数，以获得更好的类型提示
module.exports = {
   
  publicPath: './', //这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
  outputDir: 'dist', //当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录的内容在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
  asserts: 'static', //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 从生成的资源覆写 filename 或 chunkFilename 时，assetsDir 会被忽略。
  indexPath: 'index.html', //指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。
  //然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。
  filenameHashing: false, 
  //在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。
  //其值应该是一个对象，对象的 key 是入口的名字，value 是：一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；或一个指定其 entry 的字符串。
  pages: {
    
    index: {
   
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源