CODEWITHSUNDEEP
vue-routervue-cli
Lagrida Yassine
Lagrida Yassine

Reputation: 110

Vue cli problem with routing and getting files

I release a project with VUE CLI.

Whene i build my project it's didn't work and i know the problem.

Javascript files in /js/* are not working because they are routing with vue it self, and instead of uploading javascript files, server return html files and i have the error in the console:

Uncaught SyntaxError: Unexpected token '<'

I found a solution to put all ressources (js, css, fonts) in external directory and edit index.html

Question how to fix this problem inside vue cli ?

Example: instead of getting the script in mywebsite/js/app.a5fe57de.js i get a page html in this url.

Many thanks for any help.

Upvotes: 3

Views: 210

Answers (1)

Lagrida Yassine
Lagrida Yassine

Reputation: 110

The problem come from .htaccess file (i work with php in back end) given here:

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

To solve the problem we should put all assets (javascripts/imgs/css ...) in a directory and turn off Rewrite mod in this folder.

1. create the file vue.config.js with the configurations :

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

2. After the build of the project by the command npm run build, our assets (javascripts/img/css ....) are in the directory public, then we put this .htaccess file inside it :

RewriteEngine Off

And the build project will work fine !

Upvotes: 3

Related Questions