Vue项目 history 路由前后端配置

## 带二级目录的Apache配置
  - step1: 修改 vue.config.js
    添加配置 baseUrl: '/dist/',只有配置了baseUrl,打包的时候才能打出/dist文件夹,否则,将来js的路径就找不到了。
 
  - step2: 修改路由配置  在 router/index.js
    const router = new VueRouter({
      mode: 'history',
      base: '/dist/',
      routes
    })

  - step3: 修改apache 配置

    添加:
    <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /
      RewriteRule ^index\.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /dist/index.html [L]
    </IfModule>
  - step4: apache 反向代理配置
## 带二级目录的Nginx配置 
  - step1: 修改 vue.config.js
    添加配置 baseUrl: '/dist/',只有配置了baseUrl,打包的时候才能打出/dist文件夹,否则,将来js的路径就找不到了。
 
  - step2: 修改路由配置  在 router/index.js
    const router = new VueRouter({
      mode: 'history',
      base: '/dist/',
      routes
    })
 
  - step3: 配置nginx
    在本地目录下,创建conf.d文件夹,里面随意创建任意文件
    添加如下配置:
    server {
      listen 80;//端口号
      server_name localhost;//主机域名,locahost可以换成别的域名
      root /Users/Felix/Desktop/workspace/gp7/Vue.js/prd-maoyan;//document,目录
      autoindex on;//自动锁死到html中
      expires 1s;//nginx是有缓存的,添加expires 1s可以干掉缓存,线上后一定要去掉!
      charset utf-8;
      location /ajax {
        proxy_pass http://m.maoyan.com;
      }//反向代理,取线上的接口
      location / {
        try_files $uri $uri/dist /dist/index.html;
      }//保证路由刷新,路由找不到时,跳到这个根上。
    }

猜你喜欢

转载自www.cnblogs.com/mjwblog/p/9980406.html
今日推荐