精华内容
下载资源
问答
  • vue-cli配置
    2021-12-16 15:20:57

    为什么会出现跨域?

    由于浏览器同源策略的限制,当前端项目运行的服务地址 和 接口服务运行的地址 协议 域名 端口 三者有一个不一致就会出现跨域

    报错信息

    解决开发环境的跨域问题

    开发环境的跨域

    开发环境的跨域,也就是在vue-cli脚手架环境下开发启动服务时,我们访问接口所遇到的跨域问题,vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求,解决跨域问题

    1.在 vue.config.js 配置文件添加以下代码

    module.exports = {
      devServer: {
       // 代理跨域的配置
        proxy: {
            // 当我们的本地的请求 有/api的时候,就会代理我们的请求地址向另外一个服务器发出请求
            '/api': {
                target: 'www.baidu.com', // 我们要代理的真实接口地址
                changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
                // 路径重写(非必选)
                // 如果我们不光要使得域名修改,而且还需要改变其它路径,则需要做路径重写
                // 比如 我们想把请求的api去掉(真实后台没有api前缀情况) 
                // localhost:8888/api/login -> www.baidu.com/login
                pathRewrite: {
                   '^/api': ''
                }
          }
        }
      }
    }

    2.修改环境配置文件

     .env.development
    - VUE_APP_BASE_API = 'http://xxxxx.net/api'
    // 以 /api 发的请求,会被代理跨域检测到,就会代理我们的请求地址向另外一个服务器发出请求
    + VUE_APP_BASE_API = '/api'

     注意pathRewrite 选项在后台没有统一前缀情况下使用,用于去除前端临时添加的/api前缀。

    总结:

    1. vue.config.js文件属于项目的配置文件,每次有修改之后都要重启项目让配置生效

    2. 配置了proxy之后,需要把本地的环境变量文件中的绝对路径变成相对路径/api

    更多相关内容
  • 之前写过一篇关于移动端屏幕适配:移动端屏幕适配的解决,今天来聊一聊基于vue-cli配置的移动端屏幕适配问题。 配方还是一样:手淘的 lib-flexible + rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装:...
  • 主要介绍了Vue-cli配置打包文件本地使用的教程图解,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue-cli4全面配置(持续更新)细致全面的vue-cli4配置信息。涵盖了使用vue-cli开发过程中大部分配置需求。不建议直接拉取此项目作为模板,希望能按照此教程按需配置,或者复制vue.config.js增删配置,并自行安装所需...
  • 主要介绍了vue-cli配置flexible过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 安装 vue-cli3 环境准备 1. 如果您已安装 vue-cli2 ,请先删除当前脚手架,否则无法成功安装 vue-cli3 。 npm uninstall vue-cli -g 2. 检查 node.js 版本。 vue-cli3 需要 node 版本大于8.9。在cmd中输入 node -v ...
  • 详解vue-cli配置sass

    2020-12-07 16:09:16
    如何配置sass 一、安装对应依赖node模块: npm install node-sass --save-dev npm install sass-loader --save-dev 二、打开webpack.base.config.js在loaders里面加上 rules: [ { test: /\.vue$/, loader: '...
  • Vue-cli3发布已经好长时间了,笔者也在一直使用,由于公司业务需要要使用多页面配置,于是花时间研究了一下Vue-cli3如何配置多页面。由于Vue-cli3相比之前的版本做了很大的改动,在研究过程中也遇到一些问题。 对于...
  • 这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些,下面就是实战案例,一起来看一下。 新建项目 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run ...
  • 相信vue使用者对vue-cli都不会陌生,甚至可以说,很熟悉了,但对其webpack的配置可能知之甚少吧。 过完年回来后,我接手了公司的新项目。新项目是一个spa。很自然,我就想到了vue-cli脚手架了,当时研究一下它的...
  • 最近下载了vue-cli3,研究了下vue-cli3下多环境的配置。 首先,安装vue-cli3。 npm install -g @vue/cli 安装好之后的项目是这样的,见下图: 相比较vue-cli2的项目,缺少了build和config目录,另外static目录也没...
  • 乘着有时间看了一下 vue-cli3.0.x 使用 。感觉还蛮不错的。 因为之前项目使用的 vue-cli 2 创建的,强行使用 eslint让我们很难受,一些与项目无关的 “build” 和 “config” ,让人看着就有一些不爽 。由于公司环境...
  • 我们有时候因为一些特殊需求,可能需要将js/css/img等资源文件都打包到根路径下,但vue-cli3.0的路径配置中仅有 assetsDir配置项能够配置所有的静态文件所在的文件夹,并不能针对css/js/img等资源文件分别来做设置,...
  • 入门在您的vue-cli项目文件夹中,通过以下方式添加插件: vue add tailwind选择要生成的Tailwind配置: 无-不会创建一个配置文件。 如果已经有了配置(确保配置PurgeCSS),则很有用。 最小(默认) -将创建一个最小...
  • vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的, yarn源的问题有可能导致失败。如果上面安装失败的话,就分别安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader(前提是...
  • vue-cli-plugin-windicss 于Vue CLI的 ,速度很快! :high_voltage: aka按需Tailwind CSS 特征 :high_voltage: 快速-比快20到100倍 :puzzle_piece: 按需CSS实用程序(与Tailwind CSS v2兼容)和本机元素样式...
  • Vue-cli环境配置

    2021-06-22 15:22:27
    NodeJS环境配置Vue创建启动、VSCode开发使用
  • 1.vue-cli 构建项目 //全局安装 vue-cli npm install - g vue- cli //创建一个基于 webpack 模板的新项目 vue init webpack my- project //cd 进入刚新建的项目文件(my-project) cd my- project // 运行 ...
  • uccn3.0
  • 由于目前前端切换 环境配置 变得比较频繁 之前的手动切换环境配置的方式比较繁琐且容易遗漏或者出错 配置多环境,可以实现一键打包测试包或生产包 初步实现 npm run dev // 本地运行--开发环境 npm run dev:test //...

    情况

    由于目前前端切换 环境配置 变得比较频繁 之前的手动切换环境配置的方式比较繁琐且容易遗漏或者出错 配置多环境,可以实现一键打包测试包或生产包

    初步实现

    npm run dev   // 本地运行--开发环境
    npm run dev:test   // 本地运行--测试环境
    npm run build:test   // 打包发布--开发环境
    npm run build:prod   // 打包发布--测试环境
    

    步骤

    1.在根目录新建文件.env.dev.env.testenv.env.prod

    在这里插入图片描述

    分别是开发环境配置文件.env.dev

    NODE_ENV = 'development'
    VUE_APP_DESC = '开发环境'
    VUE_APP_BASEURL = 'http://dev.xxx.com'
    VUE_APP_PUBLICPATH = '/development/publicpath/'
    

    测试环境配置文件.env.testenv,之所有不取名.env.test是因为 test 模式用于 vue-cli-service test:unit,如果取名.env.test,在后面运行的时候会报错的

    NODE_ENV = 'test'
    VUE_APP_DESC = '测试环境'
    VUE_APP_BASEURL = 'http://test.xxx.com'
    VUE_APP_PUBLICPATH = '/test/publicpath/'
    

    生产环境配置文件.env.prod

    NODE_ENV = 'production'
    VUE_APP_DESC = '生产环境'
    VUE_APP_BASEURL = 'http://prod.xxx.com'
    VUE_APP_PUBLICPATH = '/production/publicpath/'
    

    2.在package.json中配置scripts

    在这里插入图片描述
    分别是本地运行开发环境、本地运行测试环境、本地运行生产环境、打包测试包、打包生产包

    "dev": "vue-cli-service serve --mode dev",
    "dev:test": "vue-cli-service serve --mode testenv",
    "dev:prod": "vue-cli-service serve --mode prod",
    "build:test": "vue-cli-service build --mode testenv",
    "build:prod": "vue-cli-service build --mode prod",
    

    3.在vue.config,js替换publicPath为环境变量

    如果项目publicPath需要在各个环境变的话,替换使用,如果不变的话也可以不替换

    publicPath: process.env.VUE_APP_PUBLICPATH,
    

    4.在封装axios的文件中配置

    在这里插入图片描述
    此处因项目而已,目的是配置接口请求前缀

    baseUrl = process.env.VUE_APP_BASEURL
    

    5.其他项目中换环境需要切换配置的地方

    如微信支付的回调地址redirect_url,可以判断当前环境匹配回调地址

    if (process.env.NODE_ENV === 'production') {
        window.location.href = 'http://xxxxxxxxxxpackge=1234546&redirect_url=http://production...'
    } else if (process.env.NODE_ENV === 'test') {
        window.location.href = 'http://xxxxxxxxxxpackge=1234546&redirect_url=http://test...'
    } else {
        window.location.href = 'http://xxxxxxxxxxpackge=1234546&redirect_url=http://development...'
    }
    

    也可以直接在.env.dev.env.testenv.env.prod 新增一个变量

    window.location.href = 'http://xxxxxxxxxxpackge=1234546&redirect_url=' + process.env.VUE_APP_REDIRECTURL
    

    6. 配置多环境打包之后发现一些问题

    1. 执行npm run build:test命令打包的代码体积变大了,部署在测试环境访问加载js变得很慢

      原因是: npm run build:test执行vue-cli-service build --mode testenv,而在.env.testenv文件中设置(如下)的是test模式,vue-cli默认只有在production模式下才会打包的同时压缩代码,打test包并没有压缩代码,所以打包的dist文件体积变大了,js体积变大了

      NODE_ENV = 'test'
      

      解决方法:.env.testenv文件中模式变更为production

      NODE_ENV = 'production'
      

      这样npm run build:test打的包就是压缩过的了


    2. 上面第一条修改之后,发现本地连接测试环境运行npm run dev:test,代码热更新变得超慢

      原因是: 上面第一条修改之后,.env.testenv文件中模式变更为production,npm run dev:test执行vue-cli-service serve --mode testenv每次热更新都会压缩代码,消耗较多时间,造成热更新变慢
      解决方法: 重新建个env.testenvdev文件,将npm run dev:test改为执行vue-cli-service serve --mode testenvdev,切换为非production模式

      "dev:test": "vue-cli-service serve --mode testenvdev",
      
      NODE_ENV = 'test'
      VUE_APP_DESC = '测试环境'
      VUE_APP_BASEURL = 'http://test.xxx.com'
      VUE_APP_PUBLICPATH = '/test/publicpath/'
      

    参考资料:
    模式和环境变量
    .env前端环境变量配置
    vue-cli3.0 环境变量与模式

    展开全文
  • 今天就主要来讲一下在vue.config.js中对一些配置的更改,简单介绍一下loader的使用;用configureWebpack简单的配置;用chainWebpack做高级配置;包括对loader的添加,修改;以及插件的配置,需要的朋友可以参考下
  • 本文讲解vue-cli脚手架根目录文件.eslintrc.js,分享给大家,具体如下: 1.eslint简介 eslint是用来管理和检测js代码风格的工具,可以和编辑器搭配使用,...3.vue-cli的.eslintrc.js配置文件的解释 // http://eslint
  • 该插件将Tauri配置为可在您的Vue CLI项目中使用。 安装 如果您有任何问题,请访问或我们的。 一般先决条件: NodeJS / npm Vue CLI( yarn global add @vue/cli / npm i -g @vue/cli ) Tauri CLI( cargo ...
  • apache的配置 这是windows下的 在httpd-vhosts.conf文件中把目录指向项目index.html文件所在的位置 # Virtual Hosts # ServerName localhost DocumentRoot D:/wamp64/www/huanzuan/dist Options Indexes ...
  • vue-cli3全面配置详解

    2020-12-08 19:35:11
    本文介绍了vue-cli3全面配置详解,分享给大家,具体如下: vue-cli3-config 创建项目 配置环境变量 通过在package.json里的scripts配置项中添加–mode xxx来选择不同环境 在项目根目录中新建.env, .env....
  • 我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置。我们可以直接通过node.js代理服务器来实现跨域请求。 vue proxyTable接口跨域请求调试 在vue-cli项目中的config文件夹下的...
  • vue-cli配置publicPath

    2022-06-07 11:13:52
    vue-cli配置publicPath

     

     

    展开全文
  • 配置专为 Vue CLI 设置使用而设计,不适用于外部使用(它可以使用,但可能需要在用户端进行一些调整 - 有关详细信息,请参阅配置文件)。 其设计的一部分是此配置可能隐式依赖于 Vue CLI 设置的其他部分,例如...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 76,412
精华内容 30,564
关键字:

vue-cli配置

友情链接: 102278.rar