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

来源：互联网发布：网络喷子现实中的样子编辑：程序博客网时间：2024/05/12 06:13

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 axiosfrom 'axios';

let base ='/api';

export constrequestLogin = params=> { returnaxios.post(`${base}/login`,params).then(res=> res.data); };

阅读全文

0 0