Измените расположение всех активов при сборке и правильной маршрутизации - PullRequest
Новая
       33

Измените расположение всех активов при сборке и правильной маршрутизации

0 голосов
/ 30 мая 2019

Я хочу иметь приложение Vue только для одной страницы (Home / Index) внутри существующего веб-сайта MVC asp.NET, но маршрутизация работает не так, как я ожидал.

Существующий asp.NET находится внутри c: / inetpub / wwwroot / bar / app / на сервере, и я разместил файлы из папки dist в Vue в том же месте.

Я также изменил index.cshtml из представления приложения asp.NET, которое я хочу указать на приложение Vue, чтобы оно содержало то, что необходимо для вызова сценариев, сгенерированных Vue. Но проблема в том, что когда я захожу на сайт www.foo.com/bar/app, он меняет URL-адрес на www.foo.com/

.

Я попытался изменить в vue.config.js свойство baseURL: '/bar/app' (приложение vue было на 2.9), чтобы оно понимало, что оно находится в этой папке на сервере. Затем я попытался обновить vue до 3.8 и использовать свойство publicPath: '/bar/app', но безрезультатно.

Я также попытался изменить конфигурацию маршрутизатора в файле router.js, включив в него base: 'bar/app', и все равно получил те же результаты.

Существует также это руководство по настройке IIS для Vue, которому я следовал: Хостинг Vue JS SPA построен на Microsoft IIS .

Когда я пытаюсь использовать yarn serve, он работает правильно, но когда я помещаю его в локальный IIS с той же структурой папок, он не

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

router.js 

import Vue from 'vue'
import router from 'vue-router'

const CadastrarRoteiro = () => import('@/views/Roteiro/CadastrarRoteiro.vue')

export default new router({
  mode: 'history',
  base: '/bar/app', //process.env.BASE_URL,
  routes: [
    {
      path: '/CadastrarRoteiro',
      component: CadastrarRoteiro
    },
    // Admin Pages
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: 'bar/app/CadastrarRoteiro',
          component: CadastrarRoteiro
        },
      ]
    },
    // Not found route
    {
      path: '*',
      redirect: '/'
    }
  ]
})

vue.config.js 

const webpack = require('webpack')
// const path = require('path')

module.exports = {
  lintOnSave: false,
  publicPath: '/bar/app/',
  // baseUrl: '/bar/app/', // !!!ORIGINAL!!!: process.env.VUE_BASE_URL || '/',
  //   outputDir: path.resolve(__dirname, './bar/app'),
  //   assetsDir: './', //path.resolve(__dirname, './bar/app'),
}

index.cshtml 

@{
    ViewBag.Title = "Home Page";
    Layout = "";    
}

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <base href=/ >
    <link rel=icon href="~/favicon.ico">
    <title>Form</title>
    <link href="~/js/chunk-2d21aba5.ff8c6269.js" rel=prefetch>
    <link href="~/js/chunk-89ad2c08.00c8a8e5.js" rel=prefetch>
    <link href="~/css/app.e2f3077d.css" rel=preload as=style>
    <link href="~/css/chunk-vendors.8f8bf103.css" rel=preload as=style>
    <link href="~/js/app.bb762d9c.js" rel=preload as=script>
    <link href="~/js/chunk-vendors.fe1112ee.js" rel=preload as=script>
    <link href="~/css/chunk-vendors.8f8bf103.css" rel=stylesheet>
    <link href="~/css/app.e2f3077d.css" rel=stylesheet>
</head>
<body>
    <noscript>
    <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id=app></div>
    <script src="~/js/chunk-vendors.fe1112ee.js"></script>
    <script src="~/js/app.bb762d9c.js"></script>
</body>
</html>

Я ожидаю, что зайду на домашнюю страницу веб-сайта по адресу www.foo.com/bar/app и получу компонент vue 'CadastrarRoteiro', но при этом останусь с тем же URL-адресом вместо изменения URL-адреса на www.foo.com/*1034. *

Чего мне не хватает?

...