Vue配置代理
文章描述：
Vue配置代理运行项目
后端
全局：
cnpm install express-generator -g局部：
express --view=ejs servercd server
cnpm install
npm run start
npm start
地址：http://localhost:3000
安装
axios
cnpm install axios -S配置
vue.config.js
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000', // 后台接口地址
ws: true, //如果要代理 websockets，配置这个参数
secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite:{ // 重写路径
'^/api':'/api'
}
}
}
}home.vue
import axios from 'axios'
axios({
url:'/api/home'
}).then(res=>{
console.log(res)
})server/routes/index.js
router.get('/api/home', function(req, res, next) {
res.send({
code:0
})
});
完整配置
const { defineConfig } = require("@vue/cli-service");
const path = require('path')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
configureWebpack:(config)=>{
config.resolve = {
extensions :['.js', '.json', '.vue'],
alias:{
'@': path.resolve(__dirname,'./src'),
}
}
},
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000', // 后台接口地址
ws: true, //如果要代理 websockets，配置这个参数
secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite:{ // 重写路径
'^/api':'/api'
}
}
}
}
});
发布时间：2022/07/15
发表评论