vue-cli3中vue.config.js配置教程详解

前言

vue-cli3推崇零配置，其图形化项目管理也很高大上。

但是vue-cli3推崇零配置的话，导致了跟之前vue-cli2的配置方式都不一样了。

别名设置，sourcemap控制，输入文件位置和输出文件位置和输出的方式，压缩js控制，打包webapck日志分析，externals忽略配置（外部引入），调试的端口配置，proxy接口配置等等的。

有时候还需要我们配置的，因为官方推荐的，并不适用于我们平时的开发所用的。

所以，我的vue.config.js配置是下面这样的。还有一个改hash的配置，暂时还不知道如何配置，以后会解决的，解决的时候顺便更新这里。

资料查询借鉴地址：

https://github.com/staven630/vue-cli3-config（介绍vue.config.js配置方法）

https://github.com/loveRandy/vue-cli3.0-vueadmin（借鉴前辈vue-cli3项目里的vue.config.js配置）也查询了不少github上的相关项目。

正文

在使用vue-cli3创建项目后，因为webpack的配置均被隐藏了，当你需要覆盖原有的配置时，则需要在项目的根目录下，新建vue.config.js文件，来配置新的配置。

配置的相关字段

vue.config.js会被自动加载

module.exports = {
  /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */
  /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
  publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
  /* 输出文件目录：在npm run build时，生成文件的目录名称 */
  outputDir: 'dist',
  /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
  assetsDir: "assets",
  /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
  productionSourceMap: false,
  /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
  filenameHashing: false,
  /* 代码保存时进行eslint检测 */
  lintOnSave: true,
  /* webpack-dev-server 相关配置 */
  devServer: {
    /* 自动打开浏览器 */
    open: true,
    /* 设置为0.0.0.0则所有的地址均能访问 */
    host: '0.0.0.0',
    port: 8066,
    https: false,
    hotOnly: false,
    /* 使用代理 */
    proxy: {
      '/api': {
        /* 目标代理服务器地址 */
        target: 'http://47.100.47.3/',
        /* 允许跨域 */
        changeOrigin: true,
      },
    },
  },
}

总结

以上所述是小编给大家介绍的vue-cli3中vue.config.js配置教程详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue-cli3全面配置详解

    本文介绍了vue-cli3全面配置详解,分享给大家,具体如下: vue-cli3-config 创建项目 配置环境变量 通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境 在项目根目录中新建.env, .env.production, .env.analyz等文件 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,代码中可以通过process.env.VUE_APP_BASE_API访问 NO

  • vue-cli3脚手架的配置及使用教程

    这次给大家带来vue-cli3.0配置及使用详解,写给需要的朋友. Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具. 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行

  • 详解如何配置vue-cli3.0的vue.config.js

    本文介绍了如何配置vue-cli3.0的vue.config.js,分享给大家,具体如下: vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍) vue

  • vue-cli3.0使用及部分配置详解

    好长一段时间没有关注vue脚手架了,昨天因为需要个后台模板,用脚手架 搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,也是试的玩了一下, 大致写写怎么玩的! 1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个 在选择功能后,会询问更细节的配置, TypeScript: 是否使

  • Vue-cli3项目配置Vue.config.js实战记录

    Vue-cli3项目配置Vue.config.js实战记录

    Vue-cli3 搭建的项目 界面想对之前较为简洁 之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js 文件(是根目录,不是src目录 语法 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build

  • vue-cli3中vue.config.js配置教程详解

    前言 vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的

  • vite.config.js配置入门详解

    vite.config.js配置入门详解

    目录 1 如何创建vite项目? 2 如何让vite项目启动时自动打开浏览器? 3vite启动默认端口为3000?如何更改默认端口? 4 vite如何设置热更新? 5vite中如何配置别名路径? 6 vite中如何设置便捷图片路径引用? 7如何把vite打包以后的js,css和img资源分别分门别类在js/css/img文件夹中? 8 如何通过vite给项目配置多个环境? 9 vite中如何配置多入口,进行多页面开发? 10 如何设置开启生产打包分析文件大小功能?类似webpack-bundle

  • 在vue中安装使用vux的教程详解

    最近因为的工作的原因在弄vue,从后端弄到前端之前一直用js,现在第一次接触vue感觉还挺有意思的,就是自己太菜了,这个脑子呀....不太够用.....页面设计用了一个叫vux的东西,vux可以提供一些组件,用起来还是比较方便的,因为自己比较菜吧,所以有很多东西还是不太深入了解...比如对vux自带样式的修改..希望有大牛看到的话也可以多多指点... 今天就记录一下vux的安装使用吧...... 首先自己要先新建一个vue项目,cmd进入到项目目录下,进行安装 1.在项目目录下安装vux(也可以

  • vue eslint简要配置教程详解

    在前端开发过程中,难免习惯了 console.log . 但是刚入门vue时,基于vue-cli 3.x,运行时终端老抛出error.一看信息,发现是不能使用 console.log ,另外import后的但是没有使用的变量也提示error信息,这是不错的. 1. 修改rules 但的你想去掉console提示?那可以通过 package.json 修改 rules 规则. 在package.json中,有这几其中的一项,在 rules 中添加 "no-console": "

  • vue基础ESLint Prettier配置教程详解

    vue基础ESLint Prettier配置教程详解

    目录 引言 前言 安装 VsCode 插件 配置 VsCode "Workspace.json" 配置 vue 的 "package.json" 配置 vue 的 ".eslintrc.js" 配置 vue 的 ".prettierrc" 配置 "eslint --fix" 一键修复 配置 ESlint 提交时检测 测试配置效果 问题排查 尾声 引言 VsCode + Vue + ESLint + Pret

  • vue项目前端错误收集之sentry教程详解

    sentry简介 Sentry 是一个开源的错误追踪工具,可以帮助开发人员实时监控和修复系统中的错误.其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误. sentry官网: https://sentry.io/ sentry安装 sentry 是一个开源的工具,可以自行搭建. 官方支持两种安装和运行 Sentry 服务器的方法, Docker 和 Python .推荐使用 Docker .

  • vue从使用到源码实现教程详解

    vue从使用到源码实现教程详解

    搭建环境 项目github地址 项目中涉及了json-server模拟get请求,用了vue-router: 关于Vue生命周期以及vue-router钩子函数详解 生命周期 1.0版本 1.哪些生命周期接口 init Created beforeCompile Compiled Ready Attatched Detached beforeDestory destoryed 2.执行顺序 1. 不具有keep-alive 进入: init->create->beforeCompile->

  • vue项目中使用tinymce编辑器的步骤详解

    Tinymce富文本也是一款很流行编辑器 把文件放在static下,然后在index.html文件中引入这个文件 <script src="static/tinymce/tinymce.min.js"></script> <tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce> 在其他子文件中引入这个 import

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • Linux中selinux基础配置教程详解

    selinux(Security-Enhanced Linux)安全增强型linux,是一个Linux内核模块,也是Linux的一个安全子系统. 三种模式: Enforcing:强制模式,在selinux运作时,已经开始限制domain/type. permissive: 警告模式,在selinux运作时,会有警告讯息,但不会限制domain/type的存取. disabled: 关闭模式. 可用getenforce查看selinux状态 selinux对文件的作用: 当开启selinux后,s

随机推荐