1.前端本地开发环境需要配置代理:
在项目路径下创建 vue.config.js ,内容如下:
const path = require('path');
module.exports = {
// publicPath:'http://.com/mm', // 线上
publicPath:'', //本地
outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist', // 不同的环境打不同包名
devServer:{ // 配置服务器
port:8891,
open:true,
https:false,
// disableHostCheck: true,
overlay: {
warnings: true,
errors: true
},
proxy:{ //主要是这里,设置代理!!!!
'/api': {
target: 'http://www..com:****',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
},
configureWebpack:{ // 覆盖webpack默认配置的都在这里
resolve:{ // 配置解析别名
alias:{
'@':path.resolve(__dirname, './src'),
'@a':path.resolve(__dirname, './src/api'),
'@f':path.resolve(__dirname, './src/filters'),
'@u':path.resolve(__dirname, './src/utils'),
}
}
}
}
2.设置完代理之后可以请求url直接用 : '/api/' + *** 代替
3.如果前端的路由是‘history’模式,则需要在部署服务器时,在index.html同路劲下新增文件 : .htaccess, 内容如下:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
主要是为了刷新的时候,路由重写到 index.html下面。