1. Axios基础用法
文档:https://www.npmjs.com/package/axios
2. 引用Axios
Vue网络请求使用Axios,首先需要安装axios
npm install axios -s
3. Axios 在vue中的使用
import axios from 'axios'
export default {
name: 'TabForm',
data() {
return {
message: ''
}
},
mounted() {
this.getData()
},
methods: {
getData() {
axios.post(
'http://localhost:89/formDef/query',
{
params: {
taskID: 'Activity_1o3t03u'
}
}
).then(res => {
console.log(res)
}).catch(errMsg => {
console.log(errMsg)
})
}
}
}
如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
4. 跨域代理
前景:通过vue-cli3 创建的vue项目没有vue.config.js;为满足一些特殊需求,需要手动创建vue.config.js文件
4.1 创建vue.config.js
vue.config.js是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。
在根目录创建 vue.config.js
module.exports = {
publicPath: './', // 部署应用包时的基本 URL, ('./')相对路径,这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径。
outputDir: 'dist', // 输出文件目录
assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的目录。
lintOnSave: process.env.NODE_ENV === 'development', // 是否在保存的时候使用 `eslint-loader` 进行检查。 有效的值:`ture` | `false` | `"error"` 当设置为 `"error"` 时,检查出的错误会触发编译失败。
productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
filenameHashing: true, // 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而,这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false 来关闭文件名哈希。
configureWebpack: { // Webpack相关配置 - 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中。
name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
},
css: {
extract: false // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
},
chainWebpack(config) { // 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
config.plugin('preload').tap(() => [
{
rel: 'preload',
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial'
}
])
config.plugins.delete('prefetch')
config.module.rule('svg').exclude.add(resolve('src/icons')).end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
config.when(process.env.NODE_ENV !== 'development', (config) => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [
{
inline: /runtime\..*\.js$/
}
])
.end()
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial'
},
elementUI: {
name: 'chunk-elementUI', // 将elementUI单独拆分一个包
priority: 20,
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // 兼容cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // 设置自定义组件
minChunks: 3,
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single')
})
},
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: false
},
proxy: { // 如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
'/YinChuanYingJi': {
target: 'http://192.168.1.105:8083',
changeOrigin: true,
pathRewrite: {
'^/YinChuanYingJi': '/YinChuanYingJi'
}
}
}
}
}
以上配置按需引用,常见的配置项都已经写出,其他特殊可参考Vue-cli 官方文档