Vue 打包项目

最新推荐文章于 2024-05-11 23:38:27 发布

原创最新推荐文章于 2024-05-11 23:38:27 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

在项目根目录 vue.config.js中:

module.exports = {
  publicPath: "./",
};

直接使用命令:

npm run build

history路由打包后无法加载

打包的vue项目路由只能是hash模式不能是history模式。

在使用Vue框架时避免不了会使用到vue-router工具，Vue-router提供了Hash和History两种路由模式。默认为Hash模式，但此模式下URL中会存在 “#” 缺少美观，并且微信中不允许URL存在“#”。所以很多人会选择History路由模式。

const router = new VueRouter({
  mode: 'history', // 设置为history模式
  base: process.env.BASE_URL,
  ...
})
12345

但是History路由模式也不是没有问题。

History 兼容性问题

因为History路由模式的原理使用的是 Html5提供的API History，仅兼容IE10以上的浏览器，所以在需要兼容低版本浏览器时History路由就不可用了，只能使用Hash路由了。
打包部署后资源文件、router-view加载失败或不加载

这两个问题放在一起说是因为它们的原因是相同的，根目录设置错误。 Vue在设计时是假设页面部署在Web服务器根目录的，所以Vue加载资源时默认是在Web服务器根目录下加载的，但实际情况不完全是这样，当部署在子目录时就会出现这个问题，这个时候我们可以在 vue.config.js中设置 publicPath属性，来告诉Vue我们部署在哪个子目录，让Vue在这个目录下加载资源。
```
module.exports = {
    // 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，
    // 这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。
    publicPath: './',
}
12345
```
虽然publicPath在其他情况下允许是相对路径，但是在使用History路由不能使用相对路径，这样会导致router-view不加载。

引用官方原文：
至于原因(个人判断)：我查了history.pushState的 MDN文档时发现当pushState中URL为相对路径时，会根据当前URL进行解析。这样可能导致路由路径解析出错，所以Vue不允许使用相对路径。

通过URL直接访问路由地址，出现404

问题原因是History路由实现的原理是使用 history.pushState 或 history.replaceState 改变URL，不刷新页面。 Vue再根据URL加载资源这种方式来实现的路由的，并不代表服务器端真实存在与URL路径对应的页面文件。这时需要后端配合，Web服务器配置资源不存在时进行路径重写

Apache配置路径重写：

1、启用 LoadModule rewrite_module modules/mod_rewrite.so 
2、再Vue项目打包生成的目录下创建文件 .htaccess 
3、在文件中加入 <IfModule mod_rewrite.c>
 # 开启路径重写 RewriteEngine On 
# 指定重写的路径的根目录（部署所在的目录）
 RewriteBase /app/ 
 RewriteCond %{REQUEST_FILENAME} !-f 
 RewriteCond %{REQUEST_FILENAME} !-d 
# 重写到指定的目录下的哪个文件 RewriteRule ^(.*)$ index.html [L] 
</IfModule> 
12345678910111213