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

版本

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:’./’

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