精华内容
下载资源
问答
  • vue配置@根目录

    千次阅读 2020-08-20 10:11:57
    许多新手 可能不知道 vue.config.js 的vue配置文件, 这个文件得自己创建的 将如下代码复制到 vue.config.js 就可以在页面中 使用 @/api 就等于 绝对路径中的 根目录的/api // vue.config.js const path = requi

    vue-配置-@根目录

    在日常开发中, 我们导入文件写的是相对位置, 和绝对位置

    但是有些人可能知道@/store 是什么意思, 但是自己启动一个自己的vue项目却发现不可以??!!

    什么情况? 这是玄学吗?!

    不! 不是的

    许多新手 可能不知道 vue.config.js 的vue配置文件,

    这个文件得自己创建的

    将如下代码复制到 vue.config.js 就可以在页面中 使用 @/api 就等于 绝对路径中的 根目录的/api

    // vue.config.js
    const path = require('path')
    const resolve = dir => path.join(__dirname, dir)
    
    module.exports = {
        chainWebpack: config => {
            config.resolve.alias
                .set('@', resolve('src'))
        }
    }
    

    提醒

    vue.config.js 可以配置许多实用的功能, 有兴趣的可以查看的其余博客

    展开全文
  • vue 使用antd design vue 配置全局的axios的loading import Vue from 'vue' import axios from './assets/js/axios' Vue.prototype.$ajax = axios; 在axios.js文件中设置一个axios拦截器 import axios from 'axios'...

    vue 使用antd design vue 配置全局的axios的loading

    import Vue from 'vue'
    import axios from './assets/js/axios'
    Vue.prototype.$ajax = axios;
    

    在axios.js文件中设置一个axios拦截器

    import axios from 'axios'
    import store from "../../store"
    axios.interceptors.request.use(function (config) {
        store.state.loadding = true; //在请求发出之前进行一些操作
        return config
    }, function (error) {
        return Promise.reject(error)
    });
    axios.interceptors.response.use(function (response) {
        store.state.loadding = false;//在这里对返回的数据进行处理
        return response.data
    }, function (error) {
        return Promise.reject(error)
    })
    export default axios
    

    3.就是修改store.js的代码

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      //状态
      state: {
        loadding: false
      },
      //状态修改方法
      // 使用store.commit()来调用
      mutations: {
        showloadding(state, load) {
          state.loadding = load
        }
      },
      // 可以用store.dispatch来调用
      actions: {
        setloadding(context,load){
          context.commit("showloadding",load);
        }
      },
      getters: {
        isloading:(state)=>{
          return state.loadding
        }
      }
    })
    // 导出
    export default store
    

    4.在 app.vue中用加载中的组件把所有组件都包裹起来

    <a-spin :spinning="this.$store.state.loadding" tip="加载中...">
            <router-view /">
          </a-spin>
    
    展开全文
  • vue配置接口url

    千次阅读 2019-11-04 09:29:15
    接上一篇“vue配置axois多环境跨域访问”,aoxis在请求是要有url的,这里写ur的配置 为了项目的需要,可以在src的common文件夹下新建api文件夹,在文件夹下新建index.js,在这里写配置文件 import { xmmc } from...

    接上一篇“vue配置axois多环境跨域访问”,aoxis在请求是要有url的,这里写ur的配置

    为了项目的需要,可以在src的common文件夹下新建api文件夹,在文件夹下新建index.js,在这里写配置文件

     

    import { xmmc } from './xmmc.js' //导入项目名称
    import commonWea from './commonWea/index.js' //导入类别url
    import { API_SERVER } from '../config'
    
    
    export default {
        baseURL: API_SERVER.default, //基本url
        imgUrl: "/" + xmmc + "/filedownload?image=",
    
        //******************************** */低空气象接口******************
        commonWea,
    
    }

    其中 coomonWea目录是根据项目的需要,将url根据类别进行分类,当url太多时,方便管理

    import { xmmc } from '../xmmc.js' //导入类别url
    
    export default {
        // 获取实况的最新消息
        getCmaImg: "/" + xmmc + "/gis/getColorMap.do"
    }
    
    // WEBPACK FOOTER  路径url 配置 //
    // ./src/common/commonWea/index.js

    xmmc是接口的根目录地址

    /*
     * @Author: c项目名称配置,用以配置接口url的完整地址
     * @Date: 2019-11-4 09:52:24 
     * @Last Modified by: c
     * @Last Modified time: 2019-11-04 09:54:08
     */
    const xmmc = "cccc";
    export {
        xmmc
    }

    项目组整体路径截图如下:

    项目中调用,

    import api from '@/common/api/index.js'  //引入api地址
    var url = api.commonWea.getCmaImg;//请求url

     

    展开全文
  • vue配置多代理服务接口地址

    万次阅读 2019-04-20 17:09:00
    vue配置多代理接口地址 一、介绍 随着微服务架构的流行,后台项目逐渐被拆分成不同的模块进行通信,但是前端还是只有一个项目所以在访问不同模块后台时,需要请求不同的地址,在vue项目中,通过配置代理可以进行...

                             vue配置多代理接口地址

    一、介绍

    随着微服务架构的流行,后台项目逐渐被拆分成不同的模块进行通信,但是前端还是只有一个项目所以在访问不同模块后台时,需要请求不同的地址,在vue项目中,通过配置代理可以进行后端服务器接口地址访问,当需要访问不同微服务的后端接口时就需要配置不同的地址。

    二、代码

    config/index.js文件中配置代理地址:

    自己项目中定义所有接口api管理文件src/api/getData.js:

    页面调用接口时xxx.vue

    三、总结

    1、vue使用配置多代理地址方式可以访问不同的项目地址,使用以上方法。

    2、同时也是可以把所有接口通过一个统一的后台项目通过feign调用其他系统接口进行访问,使用该种方式只需要配置一个代理地址即可,同时也可以对所有接口调用进行监控,比如添加用户操作记录时就比较简单,只需要定义一个aop切面监控conroller中的方法即可。

     

     

     

     

     

     

    展开全文
  • vue配置externals (打包优化)

    千次阅读 2020-04-06 19:40:16
    标题 vue配置externals (打包优化) 1 加载配置的第一步首先都是一样的 将第三方包引入到public下的index.html文件中 <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script> 2在根...
  • vuecli3项目总配置文件及描述 module.exports = { publicPath:"/", outputDir: 'dist', // 构建输出目录 assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts) lintOnSave: false, // 是否开启eslint...
  • Vue配置proxy

    千次阅读 2021-01-05 12:52:58
    文章目录后台前台配置 proxy请求示例请求结果 后台 const express = require('express') const app = new express() app.get('/api/news', (req, res) => { // res.setHeader("Access-Control-Allow-Origin", '...
  • vue配置跨域

    万次阅读 2019-03-08 16:53:26
    npm install --save axios vue-axios 在 main.js 中加入 import Vue from 'vue' import axios from 'axios' Vue.prototype.$axios = axios 注意 Vue.prototype.axios=axios这句话就决定了你以后使用axious的时候就...
  • 解决Vue配置路由不生效,每次都重定向到首页的问题
  • Vue配置使用相对路径访问静态资源(js、css、images) 在vue项目的配置文件vue.config.js的配置文件中添加publicPath配置 module.exports = { ... publicPath: '' ... }
  • WebStorm支持Vue配置

    千次阅读 2018-05-23 15:42:55
    1,WebStorm安装Vue插件,使WebStorm拥有新建.vue文件功能: 安装完成后根据提示重启webstorm 2,Preferences-&gt;Editor-&gt;File and Code Templates添加创建文件格式和模板 点击右上角的加号 添加vue...
  • vue 配置后台接口方式

    万次阅读 热门讨论 2018-08-13 20:43:38
    vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 &gt; config &gt; index.js - 修改为如下配置 proxyTable: { '/api': { target: '...
  • vue配置多页面

    千次阅读 2019-07-04 19:16:25
    vue-cli构建项目初步目录 ...在test项目根目录下创建vue.config.js来修改配置 vue.config.js内容 module.exports = { pages: { index: { // page 的入口 entry: 'src/page/index/main.js', ...
  • vue配置https代理请求后台找不到问题描述解决 问题描述 vue-cli生成的项目,http访问。后台是https接口。 设置了代理端口 访问后台显示500错误。 解决 原因上面备注也写了 secure这个参数,表示 是否校验证书。之前...
  • vue配置compression-webpack-plugin插件 需要后台配合才可以实现ci方法 (1)vue-cli搭建的项目在config/index.js (2)打开CMD,执行&gt;npm install --save-dev compression-webpack-plugn (3)然后 cnpm run ...
  • vue配置多页面应用

    万次阅读 热门讨论 2018-05-10 18:50:02
    第一步:使用vue-cli搭建项目(注:建议安装淘宝镜像,使用cnpm执行下面操作)  1.按住shift按钮,右键点击存放项目的文件夹,点击在此处打开命令窗口。  2.在命令窗口中输入 npm install -g vue-cli 安装vue-...
  • vue 配置babel

    千次阅读 2017-07-22 21:43:24
    webpack module配置 module : { rules : [ { test : /\.vue$/ , loader : 'vue-loader' , options : { loaders : { scss : 'vue-style-loader!css-loader!sass-loader' // } } } , ...
  • vue配置svg,图标显示不出来

    千次阅读 热门讨论 2020-05-14 10:59:18
    vue配置处理svg文件,结果图标显示不出来也不报错 正常的应该如下图,shadow-root下面还有dom节点: 根据网上的步骤 https://www.cnblogs.com/luoxuemei/p/12154835.html 重新检查配置的步骤,发现没有...
  • Vue配置全局域名

    千次阅读 2018-11-24 10:34:05
    配置一个全局域名用来拼接地址  使用 process.env.HOST 方法可以获取到配置的全局域名
  • vue配置全局请求地址

    千次阅读 2020-03-31 09:14:48
    1、首先安装好axios和qs(,序列化字符串,处理发送请求的参数) 2、安装完成后在main.js中加上下面的代码 axios.defaults.baseURL = "自己的请求地址" axios.defaults.headers.post['...charset=UTF-8'; Vue.proto...
  • vue 配置代理 解决跨域问题

    万次阅读 2018-03-22 11:49:16
    vue-cli项目 配置代理 解决跨域问题 问题描述 因为是自己写前端也要自己写接口,我使用的nodejs+express开的服务写接口 但是vue 项目 运行调试时会占用一个端口 而node开启服务也许要监听一个端口 两者虽然都...
  • 我将给出最简单的代码,完成最基本的配置。需要更强的功能自己去加上 效果如下 第一步:创建登陆页面的文件 1-1:login.html <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8...
  • Vue配置路由的坑

    千次阅读 2018-07-19 17:17:32
    因为视频是vue-router是2.0,现在安装的是3.0 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from...
  • vue配置favicon.ico图标

    千次阅读 2019-05-06 00:13:35
    vue工程目录build文件夹下webpack.dev.conf.js与webpack.prod.conf.js文件中的 html-webpack-plugin添加一条favicon:'favicon文件的相对路径’ 例如: new HtmlWebpackPlugin({ filename: 'index.html', ...
  • vue配置文件不打包

    千次阅读 2018-12-03 11:53:31
    开发过程中经常需要修改后台接口地址,如果将接口地址放进打包文件中,不便于后台人员上传项目时随时修改接口地址。...此方法的原理是vue不会将static中的文件进行打包,static中的文件属于静态资源
  • vue配置后台接口地址的统一前缀

    千次阅读 2020-10-28 10:48:12
    这里使用的是axios,在main.js中添加baseURL Vue.use(VueAxios, axios) axios.defaults.baseURL = 'http://xxx.com'; 请求时: this.axios.post('/getUser', params})
  • vue配置文件注释

    千次阅读 2018-02-24 09:28:25
    https://www.cnblogs.com/whkl-m/p/6627864.html
  • vue 配置eslint代码检查

    万次阅读 2019-01-11 15:52:16
    配置eslint规则。 root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true in_empty_tag = true 5.在...
  • 首先配置vue.config.js文件 写好所需要的服务器地址 module.exports = { // 代理服务器 devServer: { proxy: { // 配置第一个服务器地址' '/api/one': { //字段 /api/one 可以自行修改,但是请求数据时,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 235,475
精华内容 94,190
关键字:

vue怎么配置

vue 订阅