Vue Cli3 Proxy

Posted on  by admin

问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 . 本文链接:https://blog.csdn.net/zz00008888/article/details/109536466. ©️2022 CSDN皮肤主题:游动-白 设计师:我叫白小胖返回首页. JavaScript 37篇. PHP-Laravel 33篇. iOS 进阶与逆向编程 28篇. 我们本地调试一般都是 npm run serve,然后打开 本机ip:8080(localhost:8080)对吧,这时候我们要调接口调试,后端的接口的地址可能在测试环境,也可能是自己电脑的 ip,总之不是你的 lcoalhost:8080,那么你调接口就会产生跨域,那么怎么办呢?就需要proxy出场了.

日常工作中,生产环境用得比较多的跨域方案是cors和nginx反向代理。 本地项目中调试用的最多的就是 node 代理,当然像 nginx、charles(抓包工具)做代理也可以,只要你会配置。.

场景

vue 中的 proxy 就是利用了 Node 代理,原理还是因为服务器端没有跨域这一说嘛,也是用了这么一个插件 地址.

扩展几个vue/cli3的配置

1、假设你要调取的接口是 http://e.dxy.net/api/test,然后你可以在本地调 localhost:8080/api/test,如axios.get('/api/test') 配置代理后,会做如下转发:localhost:8080/api/test -> http://e.dxy.net/api/testlocalhost:8080/bcma/api/test -> http://e.dxy.net/bcma/api/test. 有新手朋友可能会问:这样做是不是只是本地调试这样做,线上怎么办呢? 我们一般调接口 axios.get('/api/test'),这样调是自动请求的当前域名,也就是本地就调用 localhost:8080,到了线上就是你们自己的服务域名,所以这个只是为了本地调试使用。当然,如果你要同时调用很多个不同的域名服务,那你调用的时候就要把相关的域名明确写出来,如axios.get('http://e.dxy.net/api/test').

2、当你调接口后端的命名没有统一给接口前加 /api 这类的标识,那么你可以自己加,也就是你可以在本地调 localhost:8080/api/test,如axios.get('/api/test'),而你要的目标接口是 http://e.dxy.net/test,你就可以用 pathRewrite,遇到 /api 就去找代理 http://e.dxy.net 并且把 /api 重写为 /。 所以转发效果就是:localhost:8080/api/test -> http://e.dxy.net/test.

3、这个是对所有的接口都代理的,不止是检测到 /api 的接口,比如:localhost:8080/api/test -> http://e.dxy.net/api/testlocalhost:8080/test -> http://e.dxy.net/test.

复习一下跨域的解决方案

完整版 1、 devServer.disableHostCheck 当设置为true时,此选项将绕过主机检查。不建议这样做,因为不检查主机的应用程序容易受到DNS重新绑定攻击。.

扩展几个常用的devServer配置

  • 2、devServer.publicPath 假设服务器在http://localhost:8080下运行,output.filename设置为bundle.js。默认情况下,devServer.publicPath是/,所以您的包可以作为http://localhost:8080/bundle.js 使用。将devServer.publicPath更改为 /assets/ 就变为 http://localhost:8080/assets/bundle.js.

  • Default: '/'

    The base URL your application bundle will be deployed at (known as baseUrl before Vue CLI 3.3). This is the equivalent of webpack's output.publicPath, but Vue CLI also needs this value for other purposes, so you should always use publicPath instead of modifying webpack output.publicPath.

    By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'.

    The value can also be set to an empty string ('') or a relative path (./) so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app.

    Limitations of relative publicPath

    Relative publicPath has some limitations and should be avoided when:

    • You are using HTML5 history.pushState routing;

    • You are using the pages option to build a multi-paged app.

    This value is also respected during development. If you want your dev server to be served at root instead, you can use a conditional value:

原理

  • Type: string

  • Default: 'dist'

    The directory where the production build files will be generated in when running vue-cli-service build. Note the target directory contents will be removed before building (this behavior can be disabled by passing --no-clean when building).

    TIP

    Always use outputDir instead of modifying webpack output.path.

目录

  • Type: string

  • Default: ''

    A directory (relative to outputDir) to nest generated static assets (js, css, img, fonts) under.

    TIP

    assetsDir is ignored when overwriting the filename or chunkFilename from the generated assets.

“相关推荐”对你有帮助么?

  • Type: string

  • Default: 'index.html'

    Specify the output path for the generated index.html (relative to outputDir). Can also be an absolute path.

最新评论

  • Type: boolean

  • Default: true

    By default, generated static assets contains hashes in their filenames for better caching control. However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML generated by Vue CLI, you can disable filename hashing by setting this option to false.

最新文章

  • Type: Object

  • Default: undefined

    Build the app in multi-page mode. Each "page" should have a corresponding JavaScript entry file. The value should be an object where the key is the name of the entry, and the value is either:

    • An object that specifies its entry, template, filename, title and chunks (all optional except entry). Any other properties added beside those will also be passed directly to html-webpack-plugin, allowing user to customize said plugin;
    • Or a string specifying its entry.

    TIP

    When building in multi-page mode, the webpack config will contain different plugins (there will be multiple instances of html-webpack-plugin and preload-webpack-plugin). Make sure to run vue inspect if you are trying to modify the options for those plugins.

分类专栏

  • Type: boolean | 'warning' | 'default' | 'error'

  • Default: 'default'

    Whether to perform lint-on-save during development using eslint-loader. This value is respected only when @vue/cli-plugin-eslint is installed.

    When set to true or 'warning', eslint-loader will emit lint errors as warnings. By default, warnings are only logged to the terminal and does not fail the compilation, so this is a good default for development.

    To make lint errors show up in the browser overlay, you can use lintOnSave: 'default'. This will force eslint-loader to actually emit errors. this also means lint errors will now cause the compilation to fail.

    Setting it to 'error' will force eslint-loader to emit warnings as errors as well, which means warnings will also show up in the overlay.

    Alternatively, you can configure the overlay to display both warnings and errors:

    When lintOnSave is a truthy value, eslint-loader will be applied in both development and production. If you want to disable eslint-loader during production build, you can use the following config:

您愿意向朋友推荐“博客详情页”吗?

  • Type: boolean

  • Default: false

    Whether to use the build of Vue core that includes the runtime compiler. Setting it to true will allow you to use the template option in Vue components, but will incur around an extra 10kb payload for your app.

    See also: Runtime + Compiler vs. Runtime only.

热门文章

  • Type: boolean | Array

  • Default: false

    By default babel-loader ignores all files inside node_modules. You can enable this option to avoid unexpected untranspiled code from third-party dependencies.

    Transpiling all the dependencies could slow down the build process, though. If build performance is a concern, you can explicitly transpile only some of the dependencies by passing an array of package names or name patterns to this option.

Jest config

This option is not respected by the cli-unit-jest plugin, because in jest, we don't have to transpile code from /node_modules unless it uses non-standard features - Node >8.11 supports the latest ECMAScript features already.

However, jest sometimes has to transform content from node_modules if that code uses ES6 import/export syntax. In that case, use the transformIgnorePatterns option in jest.config.js.

See the plugin's README for more information.

productionSourceMap #

  • Type: boolean

  • Default: true

    Setting this to false can speed up production builds if you don't need source maps for production.

crossorigin #

  • Type: string

  • Default: undefined

    Configure the crossorigin attribute on and