爬坑日记--------vue如何与后端进行交互

最新推荐文章于 2025-06-16 10:55:52 发布

菜鸟之重生记

最新推荐文章于 2025-06-16 10:55:52 发布

阅读量1.3w

点赞数

分类专栏：爬坑日记

爬坑日记专栏收录该内容

9 篇文章

订阅专栏

本文档详细记录了在Vue项目中与后端进行交互的步骤，包括配置config/index.js，调整build/webpack-base.conf.js，以及编写api/api.js来实现API请求。通过这些配置，确保Vue应用能够正确地与服务器进行数据通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、配置config/index.js

// see http://vuejs-templates.github.io/webpack for documentation.
var 
path = require('path')


module.exports = {
build: {
env: 
require('./prod.env'),
index: 
path.resolve(__dirname,
'../dist/index.html'),
assetsRoot:
path.resolve(__dirname,
'../dist'),
assetsSubDirectory:
'static',
assetsPublicPath:
'/vue-admin/',
productionSourceMap:
true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip:
false,
productionGzipExtensions: ['js',
'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport:
process.env.npm_config_report
},
dev: {
env: 
require('./dev.env'),
port: 
8011,
autoOpenBrowser:
true,
assetsSubDirectory:
'static',
assetsPublicPath:
'/',
proxyTable: {
'/api' : {
target :
'http://localhost:8080',
// 目标url地址
changeOrigin:
true, 
// 指示是否跨域
pathRewrite : {
'^/api': '/api' //可以使用 /api 等价于 http://localhost:8080/api
},
}
},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap:
false
}
}

2、配置build/webpack-base.conf.js

var 
path = require('path')
var 
utils = require('./utils')
var 
config = require('../config')
var 
vueLoaderConfig = require('./vue-loader.conf')


function 
resolve(dir) {
return 
path.join(__dirname,
'..', dir)
}


module.exports = {
entry: {
app: 
'./src/main.js'
},
output: {
path: 
config.build.assetsRoot,
filename: 
'[name].js',
publicPath:
process.env.NODE_ENV ===
'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js',
'.vue', '.json'],
alias: {
'vue$':
'vue/dist/vue.esm.js',
'@':
resolve('src'),
'scss_vars':
'@/styles/vars.scss',
'api': path.resolve(__dirname, '../src/api'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 
'vue-loader',
options: 
vueLoaderConfig
},
{
test: /\.js$/,
loader: 
'babel-loader',
include: [resolve('src'),
resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 
'url-loader',
options: {
limit: 
10000,
name: 
utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 
'url-loader',
options: {
limit: 
10000,
name: 
utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}

3、编写api/api.js

import axios
from 'axios';

let base =
'/api';

export const
requestLogin = params
=> { return
axios.post(`${base}/login`,
params).then(res
=> res.data); };