实际项目中，我们需要加入一些自定义的参数。比如针对 ENV=production / NODE_ENV=development ，两种编译方式，设置不同的参数。
1、当 ENV=production，api 使用域名 app.example.com
2、当 NODE_ENV=development，api 使用域名 dev.example.com
可以这样实现，在项目根目录下创建文件 vue.config.js，添加如下代码：
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
"process.env": {
'SERVER_URL': process.env.NODE_ENV == 'production' ?
JSON.stringify('https://app.example.com/') : JSON.stringify('https://dev.example.com/')
}
})
]
}
}
需要调用的地方，直接使用 process.env.SERVER_URL，比如我在 config.js 中这样：
var config = {
apiUrl: process.env.SERVER_URL 'api/',
}
export default config
webpack 会在编译的时候替换掉 process.env.SERVER_URL，你可以在 dist 输出目录搜索 "example.com"，就可以验证是否成功了。
使用Webpack PWA等其他插件
PWA 仅是针对Web发布的技术，chrome，firefox，微软Edge 都支持，而且可以直接加入系统的应用列表，入口和电脑应用一样，方便直接启动。
Webpack 有针对pwa的插件，在 uniapp 下，同样可以再 vue.config.js 中添加，代码参考如下：
注：参考代码里的 CopyWebpackPlugin，是无需编译，直接copy发布用的，也可以参考。
const webpack = require('webpack')
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const {
getManifestJson,
parseManifestJson
} = require('@dcloudio/uni-cli-shared/lib/manifest');
const manifest = parseManifestJson(getManifestJson());
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin([
{
from: path.join(__dirname, 'src/packages/static'),
to: path.join(__dirname, 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'static')
}
]),
new SWPrecacheWebpackPlugin(
{
cacheId: 'bookcapt-cids',
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
minify: false,
navigateFallback: manifest.h5.router.base,
staticFileGlobsIgnorePatterns: [/\.map$/, /manifest\.json$/, /automator\.json/]
}
),
new WebpackPwaManifest({
name: '布克船长CIDAS',
short_name: '布克船长CIDAS',
description: '布克船长核心能力测评系统(CIDAS)',
background_color: '#f8f8f8',
theme_color: '#f8f8f8',
orientation: "landscape",
display: "standalone",
start_url: manifest.h5.router.base,
icons: [
{
src: path.resolve('src/static/pwa/logo.png'),
sizes: [96, 128, 192],
destination: path.join('assets', 'icons')
}
]
})
]
}
}
PWA页面见：https://app.readlevel.com/exam/#/
