Как заставить проект Vue.JS работать при размещении на сервере? - PullRequest
Новая
       3

Как заставить проект Vue.JS работать при размещении на сервере?

0 голосов
/ 12 января 2019

Я создал новый проект VueJS, используя пользовательский интерфейс Vue. Это работает локально на http://localhost:8080/ без ошибок. Кроме того, все хорошо, когда я запускаю задачу сборки. Однако, когда я беру файлы, которые собраны и помещены в папку dist, и загружаю их в мой хостинг-пакет через FTP, я получаю пустую страницу HTML, и исходный код выглядит следующим образом. Очевидно, не как мой локальный хост.

Просто чтобы заметить, что я пробовал это на двух разных пакетах хостинга, и я получил тот же результат. Любая помощь приветствуется. 

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]-->
    <link href=/css/app.deed7380.css rel=preload as=style>
    <link href=/js/app.1e49a2f5.js rel=preload as=script>
    <link href=/js/chunk-vendors.0e42f062.js rel=preload as=script>
    <link href=/css/app.deed7380.css rel=stylesheet>
    <link rel=icon type=image/png sizes=32x32 href=/img/icons/favicon-32x32.png>
    <link rel=icon type=image/png sizes=16x16 href=/img/icons/favicon-16x16.png>
    <link rel=manifest href=/manifest.json>
    <meta name=theme-color content=#4DBA87>
    <meta name=apple-mobile-web-app-capable content=no>
    <meta name=apple-mobile-web-app-status-bar-style content=default>
    <meta name=apple-mobile-web-app-title content=pwap>
    <link rel=apple-touch-icon href=/img/icons/apple-touch-icon-152x152.png>
    <link rel=mask-icon href=/img/icons/safari-pinned-tab.svg color=#4DBA87>
    <meta name=msapplication-TileImage content=/img/icons/msapplication-icon-144x144.png>
    <meta name=msapplication-TileColor content=#000000>
</head>

<body>
    <noscript><strong>We're sorry but pwap doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
    <div class=content-wrapper>
        <div id=app></div>
    </div>
    <script src=/js/chunk-vendors.0e42f062.js></script>
    <script src=/js/app.1e49a2f5.js></script>
</body>

</html>

Ответы [ 3 ]

0 голосов
/ 12 января 2019

Если вы используете vue, вы можете установить это в файле vue.config.js: 

module.exports = {
    baseUrl: '',
    // rest of your config
};
0 голосов
/ 18 января 2019

Чтобы решить эту проблему, вы создаете новый js-файл с именем vue.config и размещаете его в своем проекте на том же уровне, что и файл package.json. Затем добавьте следующий код в этот новый файл JS. В документации указано включение косой черты '/', однако это сохранит их, а пути к файлам js & css и т. Д. Все еще будут повреждены. Поэтому просто обновите этот код, как показано ниже. После чего вам нужно будет снова запустить процесс сборки. npm run build 

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? ''
    : ''
}
0 голосов
/ 12 января 2019

Проблема в том, что ваши файлы сборки созданы с неверным путем к вашим ресурсам.

Чтобы удалить префикс /, вызывающий вашу проблему, вы должны изменить файл конфигурации index.js в папке конфигурации вашего проекта:

из assetsPublicPath: '/',

до assetsPublicPath: '',

Затем перестройте свое приложение, и теперь оно должно исчезнуть, и ваше приложение должно теперь отображаться.

Если вы используете Vue UI для создания своего приложения, вам нужно сделать следующее:

Откройте ваш проект в Vue UI и перейдите на вкладку конфигурации. Там вы выберете «Vue cli», а затем вам нужно удалить / в поле ввода baseUrl (на скриншоте ниже на норвежском это метка «URL-utgangspunkt»):

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...