vue router mode模式在webpack 打包上线问题

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue-router mode模式有两种 hash和history。

1.hash —— 即地址栏 URL 中的 # 符号。
比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
2.history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。

一般项目上vue-router mode模式默认为hash，也可以设置history。

 config文件夹下 index.js

问题

当mode 模式为history，使用vue-cli构建项目， 打包 npm run build ，dist文件夹下 有index.html和static文件夹。

build: {
    //打包时的index放置位置
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
   //公共资源路径
    assetsPublicPath: '/',
    productionSourceMap: true,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

里面  assetsPublicPath: '/', /开头路径固定以根目录为起点。公共资源请求路径是从服务器根目录开始。

1.当项目文件放到根目录

正常情况，大家项目文件都会放在服务器的根目录，当项目文件（index.html static）放在根目录时。

如服务器网址 https://xxxxx.com 的根目录   https://xxxxx.com/index.html    

请求css文件路径       https://xxxxx.com/static/css/app.cca059254702f9ed953b7df749673cf4.css

2.项目文件放到根目录下的子文件夹

当项目文件（index.html static）放到根目录下的子文件夹时。

例如   项目文件夹名 myprojct     访问index文件路径为https://xxxxx.com/myprojct/index.html  且assetsPublicPath: '/'

则index.html文件夹所依赖的 css js img 的请求路径 依旧是从项目根目录  https://xxxxx.com/static/css/app.cca059254702f9ed953b7df749673cf4.css

导致资源无法访问。

解决途径：confing index.js     改为assetsPublicPath: './'      把绝对路径改为使用相对路径来访问依赖文件

history模式问题

通过history api，我们丢掉了丑陋的#，但是它也有个毛病：
不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的,不玩虚的。

在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

所以，如果你想在github.io上搭一个单页博客，就应该选择hash模式。比如这个博客

404错误

在History mode下，如果直接通过地址栏访问路径，那么会出现404错误，这是因为这是单页应用（废话）…其实是因为调用了history.pushState API 所以所有的跳转之类的操作都是通过router来实现的，解决这个问题很简单，只需要在后台配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。具体配置如下：

//Apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
//nginx
location / {
  try_files $uri $uri/ /index.html;
}

以上是 vue router mode模式在webpack 打包上线问题 的全部内容， 来源链接： utcz.com/z/378684.html

回到顶部