首页 > 其他分享 >前端 Vue-cli中 vue.config.js 的配置详解

前端 Vue-cli中 vue.config.js 的配置详解

时间:2024-05-02 15:44:08浏览次数:28  
标签:vue false cli Vue js --- api config

Vue-cli 3 / Vue-cli 4

 

目录结构

├── README.md  					# 说明
|-- dist                       	# 打包后文件夹
├── babel.config.js 			# babel语法编译
├── package-lock.json 
├── public						# 静态文件夹,这类资源将会直接被拷贝,而不会经过 webpack 的处理。
│   ├── favicon.ico
│   └── index.html				#入口页面
└── src						    # 源码目录
    ├── App.vue - 页面
    ├── assets  - 静态目录,这类引用会被 webpack 处理。
    │   └── logo.png
    ├── components 组件
    │   └── HelloWorld.vue
    └── main.js                  # 入口文件,加载公共组件
│—— vue.config.js                # 配置文件,需自行配置 
│—— .gitignore          		 # git忽略上传的文件格式   
│—— babel.config.js   			 # babel语法编译                        
│—— package.json       	         # 项目基本信息 
│—— .env       	                 # 环境变量和模式,需自行配置 
│—— .eslintrc.js    		  	 # ES-lint校验                   
   

vue.config.js 配置

module.exports = {
  publicPath: './',  // 基本路径
  outputDir: 'dist', // 构建时的输出目录
  assetsDir: 'static', // 放置静态资源的目录
  indexPath: 'index.html', // html 的输出路径
  filenameHashing: true, // 文件名哈希值
  lintOnSave: false, // 是否在保存的时候使用 `eslint-loader` 进行检查。

  // 组件是如何被渲染到页面中的? (ast:抽象语法树;vDom:虚拟DOM)
  // template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
  // runtime-only:将template在打包的时候,就已经编译为render函数
  // runtime-compiler:在运行的时候才去编译template
  runtimeCompiler: false,

  transpileDependencies: [], // babel-loader 默认会跳过 node_modules 依赖。
  productionSourceMap: false, // 是否为生产环境构建生成 source map

  //调整内部的 webpack 配置
  configureWebpack: () => { },

  chainWebpack: () => { },

  // 配置 webpack-dev-server 行为。
  devServer: {
    open: true, // 编译后默认打开浏览器
    host: '0.0.0.0',  // 域名
    port: 8080,  // 端口
    https: false,  // 是否https
    // 显示警告和错误
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:10001',
        changeOrigin: true, // 是否跨域
        ws: false, // 是否支持 websocket
        secure: false, // 如果是 https 接口,需要配置这个参数
        pathRewrite: { // 可以理解为一个重定向或者重新赋值的功能
          '^/api': ''    // '^/api': '/'    这种接口配置出来     http://127.0.0.1:10001/login
        }               // '^/api': '/api'  这种接口配置出来     http://127.0.0.1:10001/api/login
      }
    }
  }
}
 

标签:vue,false,cli,Vue,js,---,api,config
From: https://www.cnblogs.com/emanlee/p/18006934

相关文章

  • 前端 Vue yarn.lock文件:详解和使用指南
    yarn.lock文件:详解和使用指南https://www.python100.com/html/38KF796X6BHM.html一、什么是yarn.lock文件yarn.lock文件是一个产生于Yarn0.22及以后版本的文件,它是一个自动生成的锁文件,记录了当前项目的依赖关系,并确保每个依赖的版本都是稳定的,这样可以保证软件包安装的重......
  • js逆向实战之某证信Accept-Enckey参数加密解析
    url:https://webapi.cninfo.com.cn/#/marketDataDate分析过程抓包,主要关注图中标记的数据包,它的回显数据是我们所需要的。但在该数据包的请求中有一个Accept-Enckey参数是经过加密的,需要知道其加密的逻辑。全局搜索sysapi/p_sysapi1007,只有一处符合的。找到对应地方,......
  • vite vue-cli 读取文件原始内容 使用base64内容的文件
    新建文件img.dataurl中存放图片base64<imgclass='img':src='dataurl'alt=''/>importdataurlfrom'./img.dataurl'data(){return{dataurl:dataurl}}vue.config.jsmodule.exports=defineConfig({configureWebpack:{......
  • ESXI上安装和使用MegaCli
    一、下载安装包目前官网找不到安装包了,这里提供一个MegaCli-8.04.07:https://www.lanzoub.com/iUzBn1tyhdxi二、将安装包解压上传到esxi可以通过sftp或者其他工具上传到esxi中,不太建议在esxi上直接下载,我提供的是rar压缩包。这里我使用WinSCP工具上传到esxi中,下载地址:https://ww......
  • dremio 读取 jsonl 格式支持
    实际上属于dremio社区一个问题,内部实际上是dremio对于格式化插件支持的问题,不少是基于文件格式硬编码的,尽管我们可以自定义格式化插件,但是对于已经支持的就有点不是很方便了,可以直接复用现有的,以下说明下修改以及处理直接修改JSONFormatPlugin代码支持jsonl参考如下Fo......
  • jsrpc获取瑞数请求后缀和cookie
    jsrpc获取瑞数请求后缀和cookie记得加入我们的学习群:961566389点击链接加入群聊:https://h5.qun.qq.com/s/62P0xwrCNO1.分析xhr每次请求都能看到会携带一个请求后缀uB04BPdr:以及每次请求都会更换cookie下的mEsoE3ffu2LGP:这两个就是需要逆向的参数。2.调试因为使用jsrpc......
  • vue-基础
    渲染的范围<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><p>狂神说Java</p><!--view层模板--><divid="app&quo......
  • Vue列表过滤
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>列表过滤</title><......
  • 使用joinjs绘制流程图(七)-实战-绘制流程图+节点设置样式+节点添加事件
    效果图原理joinjs中通过svg来绘制流程图,然后我们可以使用localToClientRect这个方法对节点(element)复制,它会在原来的element在svg位置上生成一个html元素,但是这样会造成原来的element节点监听的点击事件无法触发,我们可以使用原生来操作对这个元素(比如样式的设置和事件的监听)代......
  • 使用 AWS CLI 操作 S3
    使用cp命令将本地文件拷贝到S3,或者将S3中的文件拷贝到本地。awss3cplocal-file-paths3://your-bucket-name/optional-folder-path/remote-file-namelocal-file-path:您的本地机器上的文件路径,比如C:/Documents/example.txt或者/home/user/example.txt。your-bu......