Vue-cli 3.0+ 设置接口代理设置vue.config.js的配置项

vue.config.js是一个可选的配置文件

新建vue.config.js文件，存放在项目根目录（将自动加载）中：

module.exports = {devServer: {// 设置主机地址host: 'localhost',// 设置默认端口port: 8080,// 设置代理proxy: {'/api': {// 目标 API 地址target: 'http://192.168.10.33:8082/',// 如果要代理 websocketsws: false,// 将主机标头的原点更改为目标URLchangeOrigin: true}}}
}

配置项注解：

module.exports = {// 部署应用时的基本 URLbaseUrl: 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 默认为 falsemodules: true,// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS// 默认生产环境下是 true，开发环境下是 falseextract: 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-loaderparallel: require('os').cpus().length > 1,// 向 PWA 插件传递选项pwa: {},// 可以用来传递任何第三方插件选项pluginOptions: {}
}

Vue-cli 3.0+ 设置接口代理设置vue.config.js的配置项相关推荐

vue/cli 3.0 与 2.0脚手架怎样mock数据
vue/cli 3.0 与 2.0脚手架怎样mock数据 3.0 移除了 static 文件目次,新增了 public 目次,这个目次下的静态资本不会经由 webpack 的处置惩罚,会被直接拷贝,所 ...
Vue CLI 3.0正式发布！
web前端教程用大白话,来讲编程网友们纷纷点赞,也有网友调侃学不动了! 尤雨溪表示,Vue CLI 3.0 与其他的版本完全不同,它经历了重构,目的是: 1.尽可能减少现代前端工具在配置上的烦恼, ...
如何使用@vue/cli 3.0在npm上创建，发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
Vue CLI 3.0 正式发布，Vue.js 开发标准化工具
Vue CLI 3.0 已发布,该版本经历了重构,旨在: 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时: 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践. V ...
Vue Cli 3.0打包生成app
1.vue cli 3.0创建新工程,添加依赖mint-ui 2.项目配置中,公共路径设置为./,(注意,这一步非常重要,否则打包后项目找不到项目中文件) 修改保存后,可以看到vue.confi ...
Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
Vue CLI 3.0脚手架如何在本地配置mock数据json
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
vue3.0版本怎么修改服务器路径,@vue/cli 3.0 下通过npm命令切换不同服务器地址
在使用vue时,有一种情况比较麻烦,就是这个前端项目可能不止一个服务器地址,那么每个服务器地址都得打包一次,并且需要手动修改服务器接口地址. 首先知道可以使用环境变量方式将不同配置载入到不同模式下. ...
MacOS代理设置（桌面应用代理设置Terminal代理设置）
MacOS代理分为桌面应用代理设置&Terminal代理设置,使用代理软件默认只会开启桌面应用代理,Terminal代理需要单独配置桌面应用代理设置 Terminal查看桌面应用代理设置情况 ...

Vue-cli 3.0+ 设置接口代理设置vue.config.js的配置项

Vue-cli 3.0+ 设置接口代理设置vue.config.js的配置项相关推荐

最新文章

热门文章

Vue-cli 3.0+ 设置接口代理 设置vue.config.js的配置项

Vue-cli 3.0+ 设置接口代理 设置vue.config.js的配置项相关推荐

最新文章

热门文章

Vue-cli 3.0+ 设置接口代理设置vue.config.js的配置项

Vue-cli 3.0+ 设置接口代理设置vue.config.js的配置项相关推荐