爬坑日记--------vue如何与后端进行交互
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); };