1. Basic usage of Axios
Documentation: https://www.npmjs.com/package/axios
2. Quote Axios
Vue network requests use Axios, you first need to install axios
npm install axios -s3. The use of Axios in 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)
})
}
}
}
If your front-end application and back-end API server are not running on the same host, you need to proxy API requests to the API server in the development environment. This problem can be configured through the devServer.proxy option in vue.config.js.
4. Cross-domain proxy
Outlook: The vue project created through vue-cli3 does not have vue.config.js; to meet some special needs, the vue.config.js file needs to be created manually
4.1 Create vue.config.js
vue.config.js is an optional configuration file. If this file exists in the root directory of the project (at the same level as package.json), it will be automatically loaded by @vue/cli-service.
Create vue.config.js in the root directory
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'
}
}
}
}
}The above configurations can be referenced as needed. Common configuration items have been written out. For other special features, please refer to the Vue-cli official documentation.