时间戳

首页 > 解决方案 > Vue cli路由和获取文件的问题

vue-router - Vue cli路由和获取文件的问题

问题描述

我使用 VUE CLI 发布了一个项目。

当我构建我的项目时，它没有工作，我知道问题所在。

/js/* 中的 Javascript 文件不起作用，因为它们使用 vue 自行路由，而不是上传 javascript 文件，服务器返回 html 文件，我在控制台中出现错误：

未捕获的语法错误：意外的标记“<”

我找到了将所有资源（js、css、字体）放在外部目录中并编辑 index.html 的解决方案

质疑如何在 vue cli 中解决此问题？

示例：我没有获取脚本，而是mywebsite/js/app.a5fe57de.js在此 url 中获取页面 html。

非常感谢您的帮助。

标签： vue-routervue-cli

解决方案

问题来自此处.htaccess给出的文件（我在后端使用 php）：

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

为了解决这个问题Rewrite mod，我们应该将所有资产（javascripts/imgs/css ...）放在一个目录中，并在此文件夹中关闭。

1.使用配置创建文件vue.config.js：

module.exports = {
    publicPath: "/",
    outputDir: "dist/",
    assetsDir: "public/assets/"
}

2.通过命令构建项目后npm run build，我们的资产（javascripts/img/css ....）在目录public中，然后我们将这个.htaccess文件放入其中：

RewriteEngine Off

并且构建项目将正常工作！

推荐阅读