vue 调用本地json配置

在  webpack.dev.conf.js文件中

/*----------------jsonServer---------*/
/*引入json-server*/
const jsonServer = require(‘json-server‘)
/*搭建一个server*/
const apiServer = jsonServer.create()
/*将db.json关联到server*/
const apiRouter = jsonServer.router(‘db.json‘)
const middlewares = jsonServer.defaults()
apiServer.use(middlewares)
apiServer.use(apiRouter)
/*监听端口*/
apiServer.listen(3000, () => {
console.log(‘JSON Server is running‘)
})

在config文件夹的index.js 配置跨域

/*代理配置表,在这里可以配置特定的请求代理到对应的API接口*/
    /* 下面的例子将代理请求 /api/getNewsList  到 http://localhost:3000/getNewsList*/
    proxyTable: {
      ‘/api‘: {
        changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
        target: ‘http://localhost:3000‘, // 接口的域名
        pathRewrite: {
          ‘^/api‘: ‘‘ //后面可以使重写的新路径,一般不做更改
        }
      }
    },

原文地址:https://www.cnblogs.com/caoruichun/p/9251878.html

时间: 2024-10-06 21:15:30

vue 调用本地json配置的相关文章

vue cli3.0用axios调用本地json数据一直报404

最近在基于vue做后台管理系统时,用了vue cli3.0用axios调用本地json数据一直报404,市面上所有的解决办法都没用,快崩溃了,结果最后发现原因是,vue cli3.0 public 文件夹才是静态资源文件,问题解决,记录一下,以后不再踩坑. 最近发现好多人都踩这个坑,索性把我的结构发出来. 参考地址:https://www.love85g.com/?p=1500 原文地址:https://www.cnblogs.com/dapengFly/p/11359456.html

新版vue获取本地json文件数据

现在升级后的vue没有dev-server.js和dev-client.js,可以通过以下方式模拟后台数据: 1.找到webpack.dev.conf.js这个文件,在const portfinder = require('portfinder')后面添加以下代码: 1 const express = require('express') 2 const app = express()//请求server 3 var appData = require('../data.json')//加载本地

vue请求本地json数据

1.下载vue-resource插件 cnpm install vue-resource 1.2全局引入vue-resource: 在main.js import VueResource from 'vue-resource'; Vue.use(VueResource); 2.把静态josn文件放在项目根的 static文件夹: 3.发送请求: getNum() { this.$http.get("static/data/unusedorder.json").then(data =&g

Vue-cli3.0项目下axios请求本地json文件的数据

1. Vue-cli3.0项目节省了很多文件,比如讲vue-cli3.0之前版本的build/dev-server.js配置放在了vue.config.js中. 2. 在Vue-cli3.0项目的vue.config.js或vue-cli3.0之前版本的build/dev-server.js中配置: const express = require('express')const app = express() var singer = require('./src/db/data/singer.

VsCode Vue代码及插件配置

visual code vue代码settings.json配置 代码格式化使用prettier - Code formatter 插件使用 { "workbench.iconTheme": "vscode-icons", "files.autoSave": "afterDelay", "liveServer.settings.CustomBrowser": "chrome", &quo

vue axios post不能本地json

vue 脚本架里axios post是不能本地json,GET可以 解决这个问题需要自己在node里写脚本: 在build里新建立fakedata.js var express = require('express') var app = express() // 本地json-server服务器搭建代码 // 引入数据库文件 var appData = require('../static/data/1.json'); var apiRoutes = express.Router() // 使

vue组件+axios访问本地json

import axios from 'axios'export default { name: "AjaxText", data: function () { return { message: {} } }, mounted() { this.cartView(); }, methods:{ cartView() { let vm=this; axios.get("/static/sites.json", {}).then(function (response)

编写chrome插件,调用本地应用程序,并进行通讯(发送信息给应用程序)

开发说明 1.浏览器插件实现manifest.json文件内容.每个chrome的插件都需要该文件,该文件记录插件的关键信息 { "name" : "callapp", "version" : "1.0.1", "description" : "call local application", "background" : { "scripts":

Vue基础(环境配置、内部指令、全局API、选项、内置组件)

1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装完成后在命令行执行以下命令查看npm包管理器版本 npm -v npm中文文档:https://www.npmjs.cn/ 配置淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后执行 cnpm -v 查看版本信