多端兼容配置
标签
<!-- 一般标签 -->
body ———— page
div,ul, li, table,tr,td ———— view
span，b,i,font ———— text
a ———— navigator
img ———— image
js对象
APP和小程序无 document、xmlhttp、cookie、window、location、navigator、localstorage、websql、indexdb、webgl
对于基于js对象的第三方库，JQuery也不支持
vue语法
v-html：小程序不支持
小程序语法
<!-- 不遵循vue语法 -->
<view id="item-{{id}}"></view>
处理跨域
egg-cors
// 安装egg-cors包
npm i egg-cors --save
// 在plugin.js中设置开启cors
exports.cors = {
enable: true,
package: 'egg-cors',
};
// 在config.default.js中配置
config.security = {
domainWhiteList: [ '前端网页托管的域名' ],
};
配置webpack-dev-server代理
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://api-remote.xxxx.com',
pathRewrite: {
'^/api': '/'
}
}
},
}
}
mock
文档： https://github.com/nuysoft/Mock/wiki
借助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
public-path
// 1. 将`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}/`,
}
// 2. 其次，我们fork了一版官方的uni-app源码，并对@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 : '/'
})
}
uniapp推荐方式
// manifest.json
{
"h5": {
"devServer": {
"proxy": {
"/api": {
"target": "https://api-remote.xxxx.com",
"pathRewrite": {
"^/api": "/"
}
}
}
}
}
}
