解决vue 打包发布去#和页面空白的问题

 更新时间:2018年09月04日 08:44:42   作者:mjlfto  
今天小编就为大家分享一篇解决vue 打包发布去#和页面空白的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

1.vue项目中config文件下index.js中打包配置

build: {
 // Template for index.html
 index: path.resolve(__dirname, '../yiTownWebApp/index.html'),

 // Paths
 assetsRoot: path.resolve(__dirname, '../yiTownWebApp'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/yiTownWebApp/',//这个地方使用绝对路径很重要

 /**
 * Source Maps
 */

 productionSourceMap: true,
 // https://webpack.js.org/configuration/devtool/#production
 devtool: '#source-map',

 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],

 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
}

2.路由配置:router文件夹下index.js

export default new Router({
 mode: 'history',//去掉#,
 base: '/yiTownWebApp/',//这个配置也很重要,否则会出现页面空白情况
 scrollBehavior: () => ({ y: 0 }),
 routes: [
 {
 path: '/article',
 name: 'article',
 component: article
 },
 {
 path: '/footMark',
 name: 'FootMark',
 component: FootMark
 },
 {
 path: '/shareFootMark',
 name: 'ShareFootMark',
 component: ShareFootMark
 }
 ]
})

nginx配置:

 server {
 listen 8080;
 server_name localhost;
 #charset koi8-r;

 #access_log logs/host.access.log main;
 #打包后的项目目录,一定记住这个地方带有项目名称
 root /Users/a123/Desktop/vue/sgAdmin/yiTownWebApp;
 index index.html;

 location /yiTownWebApp{
  #这个地方没有项目名称,因为请求的时候如果请求:http://localhost:8080/yiTownWebApp,nginx会查找/Users/a123/Desktop/vue/sgAdmin/yiTownWebApp/目录下的数据
  root /Users/a123/Desktop/vue/sgAdmin;
  try_files $uri $uri/ @router;
  index index.html;
 }
 //try_files $uri $uri/ @router;和下边部分很重要,没有这部分发布二级一下的路由会出现js加载,但是也没空白的情况
 location @router {
  rewrite ^.*$ /index.html last;
 }
 }

以上这篇解决vue 打包发布去#和页面空白的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue简单封装axios插件和接口的统一管理操作示例

    vue简单封装axios插件和接口的统一管理操作示例

    这篇文章主要介绍了vue简单封装axios插件和接口的统一管理操作,结合具体实例形式分析了vue中axios插件安装、配置及接口统一管理具体操作技巧,需要的朋友可以参考下
    2020-02-02
  • Vue使用Markdown文档的示例

    Vue使用Markdown文档的示例

    本文主要介绍了Vue使用Markdown文档的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • Vue3+Elementplus实现面包屑功能

    Vue3+Elementplus实现面包屑功能

    这篇文章主要为大家详细介绍了Vue3如何结合Elementplus实现面包屑功能,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以参考下
    2023-11-11
  • Vue路由配置方法详细介绍

    Vue路由配置方法详细介绍

    Vue3和Vue2基本差不多,只不过需要将createRouter、createWebHistory从vue-router中引入,再进行使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-09-09
  • Vue中rules的写法使用小结

    Vue中rules的写法使用小结

    这篇文章主要介绍了Vue中rules的写法使用小结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vue2单元测试环境搭建

    vue2单元测试环境搭建

    本篇文章给大家分享了vue2单元测试环境搭建的详细步骤,对此有需要的朋友参考学习下。
    2018-05-05
  • vue项目npm run build打包dist文件及打包后空白解决办法

    vue项目npm run build打包dist文件及打包后空白解决办法

    npm run build 这个命令会执行Vue CLI中预定义的打包配置,并将打包后的文件存放在"dist"文件夹中,这篇文章主要给大家介绍了关于vue项目npm run build打包dist文件及打包后空白的解决办法,需要的朋友可以参考下
    2023-10-10
  • 解决在el-dialog中无法正确获取DOM的问题

    解决在el-dialog中无法正确获取DOM的问题

    这篇文章主要介绍了解决在el-dialog中无法正确获取DOM的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 写给vue新手们的vue渲染页面教程

    写给vue新手们的vue渲染页面教程

    这篇文章主要给大家分享了一个写给vue新手看的vue渲染页面教程,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,感兴趣的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • vue.js基于ElementUI封装了CRUD的弹框组件

    vue.js基于ElementUI封装了CRUD的弹框组件

    这篇文章主要介绍了vue.js基于ElementUI封装了CRUD的弹框组件,问咋会给你围绕主题展开详细的内容介绍,感兴趣的小伙伴可以参考一下
    2022-07-07

最新评论