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

然後重新打包，就沒問題了