文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue.config.js常用配置方法是什么

2023-07-04 13:52

关注

这篇文章主要介绍“vue.config.js常用配置方法是什么”,在日常操作中,相信很多人在vue.config.js常用配置方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue.config.js常用配置方法是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹。

vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置

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

基本路径

baseUrl从 Vue CLI 3.3 起已弃用使用publicPath来替代。

在开发环境下,如果想把开发服务器架设在根路径,可以使用一个条件式的值

module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'}

构建输出目录(打包位置)

outputDir

当运行 vue-cli-service build 时生成的生产环境构建文件的目录

module.exports = { outputDir: 'dist',}

静态资源目录

assetsDir

放置生成的静态资源 (js、css、img、fonts) 的目录

module.exports = { assetsDir: 'assets',}

eslint代码检测

是否开启eslint保存检测,有效值:ture | false | 'error'

设置为 true 时,eslint-loader 会将 lint 错误输出为编译警告。默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败

希望让 lint 错误在开发时直接显示在浏览器中,可以使用 lintOnSave: 'error'。这会强制 eslint-loader 将 lint 错误输出为编译错误

webpack-dev-server 相关配置

devServer

  devServer: {    open: true,//设置自动打开    port: 1880,//设置端口    proxy: {      //设置代理      '/axios': {        target: 'http://101.15.22.98',        changeOrigin: true,        secure: false, //如果是http接口,需要配置该参数        pathRewrite: {          '^/axios': ''          }        }      }    }  }
module.exports = {  // 部署应用时的基本 URL  publicPath: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080',  // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为  outputDir: 'dist',  // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录  assetsDir: '',  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。  indexPath: 'index.html',  // 默认在生成的静态资源文件名中包含hash以控制缓存  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'  },  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader)  lintOnSave: process.env.NODE_ENV !== 'production',  // 是否使用包含运行时编译器的 Vue 构建版本  runtimeCompiler: false,  // Babel 显式转译列表  transpileDependencies: [],  // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建  productionSourceMap: true,  // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性(注:仅影响构建时注入的标签)  crossorigin: '',  // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)  integrity: false,  // 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中  // 如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象  configureWebpack: {},  // 对内部的 webpack 配置(比如修改、增加Loader选项)(链式操作)  chainWebpack: () =>{  },  // css的处理  css: {    // 当为true时,css文件名可省略 module 默认为 false    modules: true,    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时,你也可以将其设置为 false 免得用户自己导入 CSS    // 默认生产环境下是 true,开发环境下是 false    extract: false,    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能    sourceMap: false,    //向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)    loaderOptions: {      css: {},      less: {}    }  },  // 所有 webpack-dev-server 的选项都支持  devServer: {},  // 是否为 Babel 或 TypeScript 使用 thread-loader  parallel: require('os').cpus().length > 1,  // 向 PWA 插件传递选项  pwa: {},  // 可以用来传递任何第三方插件选项  pluginOptions: {}}

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

到此,关于“vue.config.js常用配置方法是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯