单文件项目 URLRewrite 问题
生产环境下，路由为mode:history的时候，刷新页面时我们会发现页面报 404 错误，这时我们就需要去修改 Apache 的设置文件 httpd.conf 使其支持URLRewrite.
1
2
3
4
5
6
| # 在 httpd.conf 中找到下面这行配置并去除行首的 '#'
LoadModule rewrite_module modules/mod_rewrite.so
···
# 另外需要找到下面的 AllowOverride 配置将其就改为 'All'
Options FollowSymLinks
AllowOverride None
|
下一步,在 Web 项目根目录新建 .htaccess 文件,写入如下配置
1
2
3
4
5
6
7
8
| <IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
|
完整配置文件下载:httpd.conf
Vue 项目跨域请求问题
开发环境代理配置如下
1
2
3
4
5
6
7
8
| proxyTable: {
'/api/**': {
target: 'http://localhost:3000',
pathRewrite:{
'^/api':'/'
}
},
},
|
在config 文件夹里面新建一个 api.config.js 配置文件
1
2
3
4
5
6
7
|
const isPro = Object.is(process.env.NODE_ENV, 'production')
module.exports = {
baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'
}
|
修改 main.js 如下
1
2
3
4
5
6
7
8
| import apiConfig from '../config/api.config'
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl
|
至此,项目可以动态响应不同的环境解决跨域请求问题