Uniapp 添加自定义参数，添加 webpack 插件，用 vue.config.js

实际项目中，我们需要加入一些自定义的参数。比如针对 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/#/