Блог

Главная - Вопросы по программированию - При подключении express и vue js осуществляется доступ к адресу по умолчанию

При подключении express и vue js осуществляется доступ к адресу по умолчанию

#node.js #express #vue.js

#node.js #экспресс #vue.js

Вопрос:

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

Маршрутизатор с индексом Vue

 import Vue from 'vue';
import Router from 'vue-router';
import Editor from '@/components/Editor';

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes:[
        {
            path : '/board',
            name : 'Editor',
            component : Editor
        }
    ]
})

Vue main.js

 import Vue from 'vue';
import App from './App.vue';
import {router} from './routes/index.js';
import axios from 'axios';
import ElementUI from 'element-ui';
import { ElementTiptapPlugin } from 'element-tiptap';
import 'element-tiptap/lib/index.css';

Vue.use(ElementUI);
Vue.use(ElementTiptapPlugin, {
  // lang: "zh",
  // spellcheck: false,
});

Vue.config.productionTip = false;
Vue.prototype.$http = axios;

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

Экспресс-индексный маршрутизатор

 const express = require('express');
const router = express.Router();
const mssql = require('mssql');

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});

index.ejs

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Index</p>
    <a href='/board'> Go to Vue Page </a>
</body>
</html>

app.js

 const createError = require('http-errors');
const fs = require('fs');
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const ejs = require('ejs');
const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');
const apiRouter = require('./routes/api');

const port = 8000;  //changed port

app.use(express.static('public'));
app.use(express.static(path.join('node_modules', 'devexpress-richedit',     'dist', 'custom')));
app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies

// view engine setup
app.set('views', path.join(__dirname, '/views'));
app.set('view engine', 'ejs');
app.use(cors());

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
// app.use(express.static(path.join(__dirname, '/public')));
app.use(express.static(path.join(__dirname, '/')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/api', apiRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});



app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`));

мое дерево проекта

введите описание изображения здесь

Порт Express равен 8000, подключитесь к «локальному хосту: 8000 /», и появится страница Vue.

Я хочу, чтобы страница express отображалась при подключении к «localhost: 8000 /» И «localhost: 8000 / board» не работает

У меня есть еще один вопрос. Как вызвать html-файл express в Vue?

Спасибо за ваш ответ

Комментарии:

1. Используете ли вы порт express 8080 и сервер vue 8080 одновременно?

2. @Jack Yu Да, это какая-то проблема?

3. На самом деле, если вы запускаете два сервера с одинаковым портом в одной и той же позиции (сервер или компьютер). Другой не будет работать корректно.

4. @Jack Yu Я изменил порт express на 8000. Однако при подключении к localhost:8000/ индекс express не отображается, а отображается страница vue.

5. Что представляет собой содержимое в index.ejs? Как изменить порт express? Вы перезапускаете сервер express после изменения?

Ответ №1:

Сначала нам нужно знать, как работает поток запросов в целом express и vue.js .
В вашем проекте вы не используете express и vue с одним и тем же портом одновременно.
Более очевидно, что вы используете express с портом 8080 для размещения vue.js содержание.

Поток экспресс-маршрутизатора

В express ваш запрос соответствует правилу app.get("/", (req, res)= >{res.render("index")})
затем express отобразит для вас индексную страницу при посещении http://localhost:{port}/

И после добавления «другого» слова в ваше правило app.get("/other", (req, res)= >{res.render("other")})
express отобразит для вас другую страницу при посещении http://localhost:{port}/other

Что делать, если запрос не соответствует правилу?
Express выдаст вам страницу, которая не найдена.

Vue.js Поток маршрутизатора

Когда вы размещаете выходной js vue (мы называем build.js здесь) в express server вместо webpack-server.
В вашем проекте vue вы настраиваете vue-маршрутизатор с / помощью и /other-path .
В этих путях vue будет отображать содержимое / и /other-page .

Мы предполагаем, что вы используете express для размещения build.js
И нам нужен html-код, чтобы включить эту сборку.js со следующим кодом.

 <!-- put this html in project_root/public/{here}-->
<div id="app"></div>
<script src="/build.js"><script>

И мы настраиваем следующий код для размещения этого html.

 app.use("/", express.static(path.resolve(__dirname, "public")))

Когда мы вводим http://localhost:{port}/ , express выдает index.html в браузер.
Затем вы можете использовать веб-сайт, щелкнуть ссылку, которая <router-link> переходит на «другую страницу», предоставляемую vue.

НО что, если вы введете http://localhost:{port}/other-page текст в браузере, а затем нажмете кнопку ввода?
Express выдаст вам страницу, которая не найдена.

Потому что express предоставит вам контент при первом посещении веб-сайта.
Это означает, что когда запрос поступает в express, express предоставит вам содержимое по вашему правилу.
Если правило не совпадает, express выдаст вам страницу, которую вы не нашли.
Если правило совпадает, express предоставит вам содержимое, которое вы настроили.

В приведенном выше примере express предоставляет вам index.html потому что ты app.use("/", express.static(path.resolve(__dirname, "public"))) подставился .

Затем вы увидите содержимое index.html в браузере.
И затем появляется build.js чтобы отобразить содержимое vue для вас.

Но нет правила о «другой странице», поэтому express выдает вам не найденную страницу.

Подведите итог

При поступлении запроса …

  1. express определяет содержимое по вашему правилу.
    • Не соответствует: экспресс выдает страницу, которую вы не нашли.
    • Сопоставлено: экспресс предоставляет вам содержимое по вашему правилу
  2. При сопоставлении запроса он выдает html (в приведенном выше примере).
    • боузер отображает HTML-код
    • html включает build.js
    • build.js визуализация содержимого vue
  3. Когда вы нажимаете ссылку vue-router, перейдите на другую страницу
    , браузер не отправляет реального запроса.
    Он контролируется вашим build.js .
  4. Когда вы вводите URL в браузере, затем нажимаете enter внизу.
    Он переходит к шагу 1.

Поэтому, если ваш vue.js маршрутизатор и экспресс-маршрутизатор имеют одинаковый путь
к маршрутизатору, ваш экспресс не выдаст вам содержимое vue при вводе URL-адреса в браузере.

Пример

Мы предполагаем, что ваш вызываемый вывод vue build.js находится в project_root/public/{here} .
В вашем vue-маршрутизаторе есть два маршрута path «/» и «/ vue-content».
В вашем экспресс-маршрутизаторе вы настраиваетесь следующим образом.

 app.use("/", express.static(path.resolve(__dirname, "public")))
app.use("/express-page", (req, res) => {res.render("express-page")})

Затем в webpack.config.js

 output.publicPath: "/"
output.path: path.resolve(__dirname, "public")

И не забывайте, что у вас должен быть index.html вход project_root/public .
index.html должен иметь тег скрипта, включающий build.js
Затем попробуйте поместить <a href="/express-page">go to express<a> в свой vue контент.

Наконец, перейдите к http://localhost:8080/ , вы увидите html-страницу, которая общедоступна.
build.js визуализируйте контент для вас.
После того, как вы нажмете «перейти к express», браузер отправит запрос в express.
Express отобразит для вас «express-page» вместо index.html страница.

Но после ввода http://localhost:{port}/vue-router в браузере и нажатия кнопки ввода вы обнаружите, что express выдает вам страницу, которую вы не нашли.
Итак, как это исправить?

Добавьте новое правило в конце.

 app.use("/", express.static(path.resolve(__dirname, "public")))
app.use("/express-page", (req, res) => {res.render("express-page")})
app.use(express.static(path.resolve(__dirname, "public"))) // here

Согласно нашему потоку шагов суммирования, у express нет правила «vue-router».
Но есть правило, которое соответствует любому запросу.
app.use(express.static(path.resolve(__dirname, "public")))

Таким образом, express предоставит вам index.html
Затем стройте.js отобразит для вас содержимое «vue-router», потому что vue получит URL для отображения содержимого с помощью настройки vue-router.