Vue SPA（History模式）点击重置密码链接触发JavaScript禁用提示问题求助

看起来你遇到的问题并不是真的JavaScript被禁用了——而是你的应用在访问动态路由时，没有正确加载Vue的JavaScript资源，或者路由解析出现了问题，最终导致浏览器显示了<noscript>标签里的内容。让我们一步步排查并解决：

核心原因分析 #

你的index.html里的<noscript>内容只有在浏览器禁用JS时才会显示，但你显然是启用了JS的，所以问题出在资源路径错误或者路由配置/服务器重写规则不匹配上：

• 当访问/Restaurant/rp/xxx这类嵌套路由时，如果你的打包资源用的是相对路径，浏览器会尝试从/Restaurant/rp/下去请求JS/CSS文件（比如/Restaurant/rp/js/app.js），而这些文件实际是在/Restaurant/目录下，导致资源加载失败，相当于JS没有正常执行，最终显示了<noscript>的提示。
• Vue Router没有配置正确的base路径，导致部署在子目录/Restaurant/下时，路由解析出现错误，无法匹配到/rp/:id路由，页面停留在初始状态，同时资源加载问题加剧了这个情况。
• .htaccess的重写规则可能存在路径匹配的小问题，导致某些情况下没有正确将请求转发到index.html。

分步解决方案 #

1. 配置Vue Router的base路径 #

因为你的应用部署在/Restaurant子目录下，必须给Vue Router指定base选项，确保路由解析正确：

const router = new VueRouter({ 
  routes, 
  mode: 'history',
  base: '/Restaurant/' // 加上这一行，对应你的部署子目录
});

2. 确保打包资源使用绝对路径 #

在Vue项目的配置文件（比如vue.config.js，没有的话就新建一个）中设置publicPath，这样打包后的资源会自动使用绝对路径，避免嵌套路由下的资源请求错误：

module.exports = {
  publicPath: '/Restaurant/' // 与部署的子目录一致
}

如果是Vue CLI 2.x，对应的配置是config/index.js里的assetsPublicPath: '/Restaurant/'。

3. 修正.htaccess重写规则 #

如果你的.htaccess是放在/Restaurant目录下的，调整为以下内容，确保所有非文件/目录的请求都正确转发到index.html：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /Restaurant/
  # 直接访问index.html时不重写
  RewriteRule ^index\.html$ - [L]
  # 如果请求的不是文件或目录，重写到index.html
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /Restaurant/index.html [L]
</IfModule>

如果.htaccess放在网站根目录，规则可以调整为：

<IfModule mod_rewrite.c>
  RewriteEngine On
  # 针对/Restaurant下的请求处理
  RewriteBase /
  RewriteRule ^Restaurant/index\.html$ - [L]
  RewriteCond %{REQUEST_URI} ^/Restaurant/
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^Restaurant/(.*)$ /Restaurant/index.html [L]
</IfModule>

4. 检查重置密码邮件的链接 #

确保邮件里的重置密码链接是完整的正确路径，比如http://your-domain/Restaurant/rp/xxx，而不是http://your-domain/rp/xxx——后者会直接访问根目录下的rp路径，而你的应用部署在子目录里，会导致服务器无法正确重写。

验证步骤 #

1. 重新打包你的Vue应用，确保资源路径都是绝对路径（比如查看打包后的index.html里的JS/CSS链接，应该是/Restaurant/js/app.js这类格式）。
2. 部署更新后的代码和.htaccess。
3. 点击邮件里的重置链接，检查浏览器的网络请求，确认JS/CSS资源都能正常加载，同时Vue Router能正确匹配到resetPassword组件。

这样应该就能解决你遇到的问题了！

内容的提问来源于stack exchange，提问作者Jood jindy