zoukankan      html  css  js  c++  java
  • vue-cli3.0跨域请求

    1、通过vue-cli3.0创建的项目想要实现跨域请求操作

    2、首先需要穿件配置文件vue.config.js

    3、注意此文件创建在项目的根路径下面,不要创建在src下面

    文件配置网上有很多,由于理解不深,便不详解,

    const path = require('path')
    const debug = process.env.NODE_ENV !== 'production'
    
    module.exports = {
        baseUrl: '/', // 根域上下文目录
        outputDir: 'dist', // 构建输出目录
        assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
        lintOnSave: false, // 是否开启eslint保存检测,有效值:ture | false | 'error'
        runtimeCompiler: true, // 运行时版本是否需要编译
        transpileDependencies: [], // 默认babel-loader忽略mode_modules,这里可增加例外的依赖包名
        productionSourceMap: true, // 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度
        configureWebpack: config => { // webpack配置,值位对象时会合并配置,为方法时会改写配置
            if (debug) { // 开发环境配置
                config.devtool = 'cheap-module-eval-source-map'
            } else { // 生产环境配置
            }
             Object.assign(config, { // 开发生产共同配置,配置别名
                 resolve: {
                     alias: {
                         '@': path.resolve(__dirname, './src'),
                         '@c': path.resolve(__dirname, './src/components'),
                        'vue$': 'vue/dist/vue.esm.js'
                    }
                }
             })
        },
        chainWebpack: config => { // webpack链接API,用于生成和修改webapck配置,
            if (debug) {
                // 本地开发配置
            } else {
                // 生产开发配置
            }
        },
        parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
        pluginOptions: { // 第三方插件配置
        },
        pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
        },
        devServer: {
            open: true,
            host: 'localhost',
            port: 8081,
            https: false,
            hotOnly: false,
            proxy: { // 配置跨域
                '/api': {
              //要访问的跨域的api的域名 target:
    'http://localhost:5001/api/', ws: true, changOrigin: true, pathRewrite: { '^/api': '' } } }, before: app => { } } }

    以上是vue.config.js的配置,小伙伴们也可以去网上找配置文件 ,

  • 相关阅读:
    深度剖析Byteart Retail案例
    REVIT使用中遇到的各种问题汇总
    常用设计规范
    编程修养
    Linux、Windows静态编译ffmpeg 4.4.1、x264、x265等编解码库的脚本
    程序员的灯下黑:重知识轻技术
    GitHub 公布 2021 Top 10 博文「GitHub 热点速览」
    狠人!标星 3.4 万的项目说删就删,几行代码搞崩数万个开源项目
    重装系统前备份fstab
    Ubuntu系统下制作U盘启动盘
  • 原文地址:https://www.cnblogs.com/chenfan19941111/p/9735884.html
Copyright © 2011-2022 走看看