vue2 工程 hash 模式转成 history模式 记录

#本篇文章仅为工作实际情况所需进行记录，如有不符请根据自己情况解决#

详情查看vue-router官网

根据vue-router 官网的说明，vue-router 默认模式为 hash 模式，浏览器地址栏 有# 如：http://localhost:8080/#/ 若为history模式，则地址为：http://localhost:8080/  

接下来正式写需要修改的文件：

第一步：router.js

const createRouter = () => new Router({
    mode:'history',
    base:process.env.NODE_ENV === 'development' ? '/' :process.env.NODE_ENV ==='staging' ? '/test/' : '/dist/',
    scrollBehavior:() => ({ y:0}),
    routes:[...]
})

注：

本地联调地址：http://localhost:8080/

测试环境地址：http://localhost:8080/test/

生产环境地址：http://localhost:8080/dist/

第二步：vue.config.js

mudele.exports = {
    publicPath: process.env.NODE_ENV === 'development' ? '/' : process.env.NODE_ENV === 'staging' ? '/test/' : '/dist/',
    outputDir: 'dist',
    assetsDir: 'dist',
    ...
}

注：publicPath 本地联调 采用的是相对路径地址，测试环境 静态资源存放在/test/目录下，生产dist环境 静态资源存放在/dist/目录下

项目环境配置如下：

  开发：.env.development        NODE_ENV = development

  测试：.env.staging                 NODE_ENV = staging

  生产：.env.production            NODE_ENV = production

第三步：nginx 配置

nginx.config 文件配置如下（重要配置）：

server {
  listen 8000;
  server_name localhost;
  #charset koi8 - r;
  #access_log logs / host.access.log main;
  location /dist/ {
    # alias /data/nginx/html/dist/;
    alias /生产nginx存放前端资源地址/; 
    try_files $uri $uri/ /index.html;
    index index.html index.htm;
    add_header Access-Control-Allow-origin *;
  }
  location /test/ {
    alias /测试nginx存放前端资源地址/
    try_files $uri $uri/ /index.html;
    index index.html index.htm;
    add_header Access-Control-Allow-origin *;
  }
  location / {
    try_files $uri $uri/ /test/index.html;
  }

  location /test-api/ {
    proxy_read_timeout 600s;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:3000/;
  }

    location /pro-api/ {
    proxy_read_timeout 600s;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://127.1.0.1:3008/;
  }
}