задний план
В последнее время команда пилотирует использованиеuni-appЧтобы выполнить некоторые небольшие требования, но в основном сначала сделать пилотную версию на H5, а затем скомпилировать ее в небольшую программу для выпуска, как и планировалось. На этот раз я поделюсь несколькими небольшими проблемами и решениями, с которыми столкнулись.
Упомянутые ниже проблемы в основном используются вuni-appразвиватьH5Он будет встречаться только тогда, когда платформа неH5Платформу можно игнорировать.
междоменная проблема
Во-первых, локальная разработка отличается от разработки напрямую с помощью IDE для небольших программ.H5При использовании платформы вам нужно использовать браузер для отладки, и у браузера будут междоменные проблемы. Например, когда вы напрямую обращаетесь к разрабатываемой странице через локальный IP-адрес, и эта страница будет вызывать некоторые существующие интерфейсы, она столкнется с междоменными проблемами.
официальное решение
uni-appЧиновник представил некоторые методы решения междоменных проблем, такие как включение CORS на сервере, установка междоменных плагинов для браузеров и т. д. Подробнее см.Меры предосторожности при использовании версии uni-app H5. Но что в нем не упоминается (должно быть вызвано тем, что документ долго не обновлялся), так это то, что если вы не хотите проходить через такую нервотрепку, чтобы решить ее, есть более удобный способ, а именно использоватьwebpack-dev-serverПойдите к агенту, чтобы решить это.
более удобное решение
Согласно описанию официальной документации,devServerтребуется настройка вmanifest.jsonперейти к конфигурации, и поскольку этот файл конфигурацииjsonформат, поэтому можно настроить только простые типы. но дляproxyЭтой конфигурации также достаточно. Это можно решить напрямую, настроив следующим образом:
// manifest.json
{
"h5": {
"devServer": {
"proxy": {
"/prefix/api/user/list": {
"target": "https://api-remote.xxxx.com",
"pathRewrite": {
"^/prefix": ""
}
}
}
}
}
}
другое решение
Создайте файл vue.config.js напрямую, настройте в нем devServer и поместите код напрямую
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/prefix/api/user/list': {
target: 'https://api-remote.xxxx.com',
pathRewrite: {
'^/prefix': ''
}
}
},
}
}
Преимущества такого подхода очевидны, т.jsвместоjsonДеконфигурация будет более гибкой.Следует отметить, что две вышеуказанные схемы нельзя использовать одновременно, и первая будет охватывать вторую.
проблема мока
Это может не иметь большого значения, в конце концов, есть много онлайн-платформ для насмешек, таких как Easy Mock. Но иногда это может показаться хлопотным, если вы не хотите выходить из окна редактирования кода для регистрации, записываете фиктивные данные онлайн и хотите решить все с помощью кода, тогда мы также можем использовать второе решение выше, чтобы сделать это.
решение
с помощьюmocker-apiиmockjsЭти два инструмента, прямая настройкаdevServerизbeforeвариантов, код выглядит следующим образом:
// vue.config.js
const webpackApiMocker = require('mocker-api')
module.exports = {
devServer: {
before (app) {
webpackApiMocker(app, path.resolve('./mock/index.js'))
}
}
}
// mock/index.js
const Mock = require('mockjs')
const Random = Mock.Random
const mock = Mock.mock
const proxy = {
'GET /api/user/list': mock({
'array|3': [
{
id: 1,
username: 'kenny',
sex: 'male'
}
]
}),
'POST /api/login/account': (req, res) => {
return res.json({
status: 'ok',
data: {
id: Random.id(),
userName: Random.cname(),
city: Random.city()
}
})
}
}
module.exports = proxy
Проблемы с публичным путем
На этапе тестирования нам нужно развернуть код в CDN для тестирования.Разные среды соответствуют разным доменным именам CDN.manifest.jsonМы надеемся, что способ настройки publicPath, очевидно, очень негибкий.publicPathОн динамичен, связан со средой, репозиторием, названием проекта и даже веткой разработки и не требует от разработчиков заботы.
решение
Для решения этой проблемы требуется небольшая доработка строительных лесов.
- Во-первых, мы будем
publicPathЭта конфигурация вынесена и помещена в отдельный конфигурационный файл, напримерproject-config.js, и поместите его в корневой каталог проекта
const projectName = 'xxx' // 当前工程名，此处自由发挥即可
const isDev = isDev() // 是否为本地开发环境，此处自由发挥即可
const CDN_HOST = process.env.CDN_HOST // build时指定的CDN域名
const APP_ENV = process.env.APP_ENV // build时指定的自定义环境
module.exports = {
publicPath: isDev
? '/'
: `//${CDN_HOST}/static/${projectName}/${APP_ENV}/`,
}
- Во-вторых, мы разветвили версию официального исходного кода универсального приложения и
@dcloudio/vue-cli-plugin-uni/index.jsвнес некоторые изменения
// @dcloudio/vue-cli-plugin-uni/index.js#L30
// 获取本地的project-config配置
module.exports = (api, options) => {
const projectConfig = require(api.resolve('project-config'))
Object.assign(options, {
outputDir: process.env.UNI_OUTPUT_TMP_DIR || process.env.UNI_OUTPUT_DIR,
assetsDir
}, vueConfig, {
// 重新对publicPath进行覆盖
publicPath: process.env.NODE_ENV === 'production' ? projectConfig.publicPath : '/'
})
}
Это сделаетmanifest.jsonКонфигурация недействительна, то есть если вы используетеHBuilderРазвитие будет затронуто немного.