D
D
dimonchu2019-07-02 17:24:14
JavaScript
dimonchu, 2019-07-02 17:24:14

Vue.js and the problem with embedding the application on another site. Who faced?

There is an application on vue.js + vuetify + router + vuex.
The task is to embed this SPA as a widget on another site.
I used this solution, it's the only one so far - https://itnext.io/vuidget-how-to-create-an-embedda...
Library - https://github.com/karol-f/vue-custom- element
The problem occurs specifically on one domain, where simply instead of an application, an empty block of comment content is displayed.

<vue-widget id="vue-widget" vce-ready="">
    <div id="app"><!----></div>
</vue-widget>

It works for everyone else, everything is built in properly.
Scripts and styles are connected on the site, through the developer panel you can see that they have loaded.
The links below lead to the same domain in the "dist" directory, because I don't want to show the domain. But even if you refer through absolute links of the domain on which the SPA is located, the same problem.
<link href="/dist/static/css/app.36dd3e0b96e06ae6f3130a58cf185192.css" rel="stylesheet">
<script type="text/javascript" src="/dist/static/js/manifest.2ae2e69a05c33dfc65f8.js"></script>
<script type="text/javascript" src="/dist/static/js/vendor.614f0593bd5c53cf6320.js"></script>
<script type="text/javascript" src="/dist/static/js/app.1c44a427c10b2e559de0.js"></script>

There are no errors at all in the browser console, or on the server. CORS is configured, but even if not configured, there would be an error.
I think in the direction of the web server settings, the only thing that comes to mind ... But how? Apache costs. The config is very long, and I can't show it.
Apache version: 2.4.10
I tried to immediately block scripts in dev-tools, I thought that they somehow affect.
Then I tried to connect to the root of the project in a regular HTML file to exclude the influence of WordPress. The result hasn't changed.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
dimonchu, 2019-07-03
@dimonchu

Well. The solution, like the problem, is stupid.
I changed the router to "history" (a very long time ago) so that there are beautiful URLs, but the documentation says that you need to configure the web server with this approach if the SPA is not in the root directory and not in index.html.
https://router.vuejs.org/guide/essentials/history-...
Vue-router in history mode couldn't just work. And it worked on other domains, since I really placed them in index.html, at the root.
Quick solution: change from 'history' to 'hash mode', or just remove the 'mode' option in the router (because it is initially in this mode).
Otherwise, you need to set up a web server.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question