Vue Intermediate Guide — 04 Междоменные настройки в Vue, упаковка и развертывание в nginx

Vue.js

предисловие

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

Что такое перекрестный домен?Много способов достижения перекрестного домена?

Я не буду вдаваться в подробности здесь, вы можете самостоятельно использовать Baidu.

Зачем внедрять внешний междоменный интерфейс

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

Конфигурация в проекте vue

Возьмем в качестве примера проект, созданный vue-cli, в файле конфигурации веб-пакета /config/index.js, так как мы находимся всреда разработкиЕстественно настроить его в dev, найти атрибут proxyTable и настроить следующим образом:

  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    <!-- 使用proxyTable进行跨域设置 -->
    proxyTable: {
        '/api': {
          target: 'http://www.abc.com',  // 设置你调用的接口域名和端口号, 别忘了加http
          changeOrigin: true,  // 是否跨域
          pathRewrite: {
              // 这里理解成用'/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 
              // 比如我要调用'http://www.abc.com/user/add'，直接写'/api/user/add'即可'
            '^/api': '/'
          }
        }
    },

    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    
    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,
    cssSourceMap: true
  },

Конфигурация в свойстве proxyTable выше приводит к проксированию запроса с локального порта 8080 на доменное имя http://www.abc.com.

'http://localhost:8080/api' ===> 'http://www.abc.com/'

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

Примечание. Функция прокси, предоставляемая Vue-cli, предназначена только для использования в среде разработки. Она (http-server-middleware) зависит от среды узла. Рабочий код должен использовать сборку запуска npm, а затем помещать dist в nginx. сервер Настроить адрес прокси на nginx

Проект Vue развернут для междоменной настройки на nginx

Это еще не конец.Теперь мы собираемся развернуть проект на nginx.В это время интерфейс, к которому можно получить доступ, больше не доступен, поэтому нам нужно настроить nginx в это время.

Загрузка системы Windows nginx

  • ссылка для скачивания:nginx.org/ru/docs/win…
  • Выберите загрузку, чтобы перейти на страницу выбора версии для загрузки.

  • Выберите стабильную версию для загрузки здесь

  • После завершения загрузки каталог выглядит следующим образом

  • Введите файл cong, откройте файл nginx.congf, найдите атрибут listen в объекте сервера, чтобы просмотреть номер порта прослушивания (порт по умолчанию 80).

  • Запустите nginx.exe в корневом каталоге nginx. Если мелькает черное окно, запуск выполнен успешно. Если эта страница появляется на локальном хосте: 80, доступ выполнен успешно.

  • Если доступ не удался, возможно, порт занят, измените указанный выше номер порта, перезапустите nginx и браузер получит доступ к localhost:XXXX.

Конфигурация проекта Vue, развернутого на nginx

  • Проект vue запускает сборку npm run для упаковки проекта. Помните, что существуют локальные статические файлы ресурсов, требующие настройки веб-пакета, а именно:
config文件下的index.js文件找到build属性
assetsPublicPath: '/'   =>>>>>   assetsPublicPath: './' 


build文件下的untils文件中找到vue-style-loader
增加 publicPath: '../../'

  • В настоящее время к упакованному файлу dist можно получить доступ, не помещая его в среду сервера.Вы можете напрямую открыть index.html в каталоге файла dist, чтобы открыть доступ.
这时候的静态资源都可以被加载出来,且不会报错,但是api访问的话还是会报错

  • Скопируйте содержимое упакованного dist-файла в html-файл в файле nginx.

打开html文件清空里面的内容,将复制的内容粘贴进去

  • Войдите в файл config, откройте файл nginx.congf, найдите атрибут сервера и добавьте в него новую конфигурацию.
	location /api {			
		proxy_pass http://localhost:4000/;			
	}


你要访问那个地址这里就修改为你要访问的那个地址

  • Вышеуказанная конфигурация завершена

Примечание: После изменения конфигурации в nginx необходимо перезапустить nginx, помните!!!

простая рабочая команда nginx

nginx.exe -s stop // stop是快速停止nginx，可能并不保存相关信息
nginx.exe -s quit // quit是完整有序的停止nginx，并保存相关信息
nginx.exe -s reload // 当配置信息修改，需要重新载入这些配置时使用此命令
nginx.exe -s reopen // 重新打开日志文件
nginx -v // 查看Nginx版本

Выше приведена конфигурация, которую я использовал в проекте, и есть несколько более продвинутых конфигураций, которые еще не использовались, для справки.

Категории