526互联

VUE- history模式发布项目部署

发布时间 2023-05-16 18:59:42作者: 无心々菜

VUE- history模式发布项目部署

 

环境：vue项目 发布后，通过nginx部署到docker容器内。

如需要去掉路径中的 #/ 则需要使用history模式发布。

1. 修改路由的配置文件

const router = new Router({
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  mode: 'history',
  routes: constantRouterMap,
});

 

这样调试模式没有问题，但是发布后，页面刷新或跳转时会报404错误

 

2. 修改配置文件，vue.config.js

const vueConfig = {
  publicPath: '/', //这个必须，引入静态资源需要从根路径引入，否则会找不到静态资源
  configureWebpack: {
     module: { 
    },
  }, 
  devServer: {
    // host: 'manger.railplus.com',
    // development server port 8000
    port: 8005,
    disableHostCheck: true, //解决浏览器出现Invalid Host header页面的问题// host: '0.0.0.0',
    // https: true

    // history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
    historyApiFallback: {
      index: '/index.html' //与output的publicPath
    },
  }
};
 

module.exports = vueConfig;

 

3. 修改静态文件的引用，public/index.html 

 <link rel="icon" href="<%= BASE_URL %>logo.png" />

 <script src="<%= BASE_URL %>libs/CesiumSuper/Cesium.js"></script>
 <link rel="stylesheet" href="<%= BASE_URL %>libs/CesiumSuper/Widgets/widgets.css" />

 

 

 nginx中的配置如下

    location / {
      root   /usr/share/nginx/html; //这一句试试，直接访问此nginx不需要，如通过其他代理访问则需要
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

 

 

 

 

end