欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue+vuecli+webpack+vuerouter 使用history模式搭建项目 开发没问题 打包后报错问题总结

程序员文章站 2022-04-24 09:01:19
...

版本

vue2.5+vuecli+webpack3.6

问题背景

router的mode模式使用了history,开发环境没有任何问题,打包后出现了2个问题

问题1:路由路径实际不存在的情况,进入就出现404或者第一次进入没问题,刷新页面404

参考了官方文档,发现需要后端配合 HTML5 History 模式
我在服务器项目的根目录添加了 .htaccess 文件,粘贴了官方文档的内容,如下

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

我是Apache服务器,如果不加 .htaccess文件的话,也可以在apache中配置,首先打开rewrite
然后修改对应项目的vhost配置

<VirtualHost *:80>
    DocumentRoot "/your-project"
    ServerName local.demo.com
  	..........这是省略的常规配置,不重要
    <Directory /your-project>
        <IfModule mod_rewrite.c>
          RewriteEngine On
          RewriteBase /
          RewriteRule ^index\.html$ - [L]
          RewriteCond %{REQUEST_FILENAME} !-f
          RewriteCond %{REQUEST_FILENAME} !-d
          RewriteRule . /index.html [L]
        </IfModule>
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
</VirtualHost>

或者使用FallbackResource配置如下

<VirtualHost *:80>
    DocumentRoot "/your-project"
    ServerName local.demo.com
  	..........这是省略的常规配置,不重要
    <Directory /your-project>
        FallbackResource /index.html   
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
</VirtualHost>

如果是Nginx或者其他也可以参考官方文档

问题2:进入某些页面报 "Uncaught SyntaxError: Unexpected token <"的错

我采用的是修改config/index.js 这个文件中build选项里面的assetsPublicPath:’./’

vue+vuecli+webpack+vuerouter 使用history模式搭建项目 开发没问题 打包后报错问题总结

然后重新打包,就没问题了