CODEWITHSUNDEEP
vue.jsbuildvuejs2url-rewriting
MartenCatcher
MartenCatcher

Reputation: 2887

Vue: update paths to static assets

I have Vue v2 SPA. This is standard application as it can be. Let it be hello-world from the documentation. Let's make it and build:

vue create hello-world
cd hello-world
yarn install
yarn build

But I got a requirement: the application must be embedded (by URL rewriting, not deployed) into another site:

But application's build contains absolute paths for all assets:

$ cat dist/index.html

<!DOCTYPE html>
<html lang=en>
<head>
...
<title>hello-world</title>
<link href=/css/app.fb0c6e1c.css rel=preload as=style>
<link href=/js/app.042151d6.js rel=preload as=script>
<link href=/js/chunk-vendors.f0b6743d.js rel=preload as=script>
<link href=/css/app.fb0c6e1c.css rel=stylesheet>
....

It breaks third-party site's rewrites. Resource app.fb0c6e1c.css will be got from:

https://site2.come/css/app.fb0c6e1c.css

Instead of:

https://site2.come/path-toapp/css/app.fb0c6e1c.css

How can I solve the problem? I didn't find any relevant configuration in vue's documentation.

Of course I have a solution. I can rewrite URL's in CI's script with bash: 

sed -i "s/\(src\|href\)=\//\1=/g" dist/index.html

But the solution above is a hack and cannot be supported by web developers. Because of this I'm looking for more significant (webpack-based for example) solution.

Upvotes: 0

Views: 728

Answers (1)

Nilson Jacques
Nilson Jacques

Reputation: 468

You need to create a vue.config.js file in your project root, and set the publicPath option:

module.exports = {
  publicPath: '/path-toapp/'
}

Upvotes: 1

Related Questions