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:’./’
然后重新打包,就没问题了
上一篇: 3.2③文本格式化
下一篇: HTML 文本格式化