vue请求数据,build文件没有dev-server.js解决办法

在最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置即可

1.旧版dev-server.js配置本地数据访问:

在var compiler = webpack(webpackConfig)前面配置

var app = express()
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()

apiRoutes.get('/seller', function (req, res) {
  res.json({
    errno: 0,
    data: seller
  }
)
})

apiRoutes.get('/goods', function (req, res) {
  res.json({
    errno: 0,
    data: goods
  }
)
})

apiRoutes.get('/ratings', function (req, res) {
  res.json({
    errno: 0,
    data: ratings
  }
)
})

app.use('/api', apiRoutes)
2. 新版在webpack.dev.conf.js配置

const express = require('express')
const app = express()
var axios = require('axios')
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
//找到devServer在里面添加
  before (app) {
      app.get('/api/getDiscList', function (req, res) {
        var url = '' //链接地址
        axios.get(url, { 
          headers: {
            referer: '',
            host: ''
          },
          params: req.query
        }).then((response) => {
          res.json(response.data)
        }).catch((e) => {
          console.log(e)
        })
      })
    }

恩 大概就是这样吧,小白一枚,有问题欢迎各位大佬提出建议。。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`vue.config.js` 是 Vue CLI 3.x 以上版本中新增的配置文件,用于配置构建工具的行为。它是一个可选的配置文件,在项目根目录下创建即可。 以下是 `vue.config.js` 中可以配置的选项: ### publicPath - 类型:`string` - 默认值:`'/'` 应用部署的基础路径。默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径下,例如 `https://www.example.com/`。如果你的应用被部署在一个子路径下,你需要在这里指定子路径。例如,如果你的应用被部署在 `https://www.example.com/my-app/`,那么将 `publicPath` 设置为 `'/my-app/'`。 ### outputDir - 类型:`string` - 默认值:`'dist'` 打包生成的文件输出的目录。当运行 `npm run build` 时,生成的文件将会被放置在此目录下。 ### assetsDir - 类型:`string` - 默认值:空字符串 静态资源文件夹的名称。该文件夹中的文件将会被复制到输出目录中,例如 `img/logo.png` 会被复制到 `dist/img/logo.png`。如果设置了 `publicPath`,则在 HTML 文件中引用静态资源时需要使用该路径。 ### indexPath - 类型:`string` - 默认值:`'index.html'` 指定生成的 `index.html` 文件的输出路径。相对于 `outputDir`。 ### filenameHashing - 类型:`boolean` - 默认值:`true` 是否使用文件哈希。如果设置为 `true`,则在文件名中包含哈希以实现缓存。 ### lintOnSave - 类型:`boolean | 'warning' | 'default' | 'error'` - 默认值:`true` 是否在保存时通过 eslint-loader 在每次构建时 lint 代码。设置为 `true` 或 `'warning'` 时,保存时会输出提示信息但不会阻止编译。设置为 `'default'` 时,保存时会输出提示信息并阻止编译。设置为 `'error'` 时,保存时会输出错误信息并阻止编译。 ### runtimeCompiler - 类型:`boolean` - 默认值:`false` 是否使用包含运行时编译器的 Vue 构建版本。设置为 `true` 可以使用 `template` 选项,但会增加应用的体积。 ### transpileDependencies - 类型:`Array<string | RegExp>` - 默认值:`[]` 需要被 babel 编译的依赖包名称或正则表达式列表。如果使用了某些第三方库,可能需要将它们加入到这个选项中。 ### productionSourceMap - 类型:`boolean` - 默认值:`true` 是否在生产环境中生成 source map。开启 source map 会影响构建性能,但可以方便地调试生产环境中的代码。 ### crossorigin - 类型:`string` - 默认值:空字符串 设置生成的 HTML 文件中的 `<link>` 和 `<script>` 标签的 `crossorigin` 属性。默认情况下,没有这个属性。如果需要设置,可以使用 `'anonymous'` 或 `'use-credentials'`。 ### configureWebpack - 类型:`Object | Function` - 默认值:空对象 修改内部的 Webpack 配置。如果值是一个对象,则它将被合并到最终的配置中。如果值是一个函数,则它会接收被解析的配置作为参数。该函数可以修改配置并返回新的配置,也可以返回一个被合并的配置对象。 ### chainWebpack - 类型:`Function` - 默认值:空函数 允许对内部的 Webpack 配置进行更细粒度的修改。该选项接收一个函数,该函数会在内部的 Webpack 配置被解析完成后执行。可以使用 [webpack-chain](https://github.com/neutrinojs/webpack-chain) API 对配置进行修改。 ### css - 类型:`Object` - 默认值:空对象 配置 CSS 相关选项。 #### css.modules - 类型:`boolean` - 默认值:`false` 是否开启 CSS modules。启用 CSS modules 后,类名将会被自动转换为哈希字符串,以避免样式冲突。 #### css.extract - 类型:`boolean | Object` - 默认值:`true` 是否将 CSS 提取为单独的文件。默认情况下,生产环境中会提取 CSS,开发环境中不会。如果设置为 `false`,则所有的 CSS 代码会被包含在 JavaScript 文件中。 如果设置为一个对象,则可以通过 `filename` 选项来指定提取出来的 CSS 文件名,以及 `chunkFilename` 选项来指定异步加载的 CSS 文件名。 #### css.sourceMap - 类型:`boolean` - 默认值:`false` 是否为 CSS 开启 source map。 #### css.loaderOptions - 类型:`Object` 向 CSS 相关的 loader 传递选项。例如: ```javascript module.exports = { css: { loaderOptions: { sass: { data: `@import "@/styles/variables.scss";` } } } } ``` 上述配置表示向 `sass-loader` 传递了一个名为 `data` 的选项,该选项包含了一个 SCSS 变量文件的引用。 ### devServer - 类型:`Object` - 默认值:空对象 配置开发服务器行为。 #### devServer.port - 类型:`number` - 默认值:`8080` 开发服务器监听的端口号。 #### devServer.host - 类型:`string` - 默认值:空字符串 开发服务器监听的主机名。如果想让服务器可以被外部访问,应将该值设置为 `0.0.0.0`。 #### devServer.proxy - 类型:`string | Object` - 默认值:空对象 配置 devServer 的代理。可以使用字符串或对象来代理多个路径。例如: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } } } } ``` 上述配置表示将所有以 `/api` 开头的请求转发到 `http://localhost:3000`。`changeOrigin` 选项表示是否改变请求头中的 `host` 值。 #### devServer.before - 类型:`Function` 提供在服务器内部所有其他中间件之前执行自定义中间件的能力。该函数接收 app、server 和 compiler 3 个参数。例如: ```javascript module.exports = { devServer: { before(app) { app.get('/api/user', (req, res) => { res.json({ name: 'Vue.js' }) }) } } } ``` 上述配置表示在开发服务器启动后,访问 `/api/user` 路径时返回一个名为 `Vue.js` 的 JSON 数据。 ### pluginOptions - 类型:`Object` - 默认值:空对象 向插件传递选项。例如: ```javascript module.exports = { pluginOptions: { foo: { bar: true } } } ``` 上述配置表示向 `foo` 插件传递了一个名为 `bar` 的选项,该选项的值为 `true`。 以上是 `vue.config.js` 中的一些常用选项,还有其他选项可以在需要时查阅官方文档,进行更详细的配置。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值