vue打包分离配置文件

最新推荐文章于 2024-09-19 19:00:27 发布

joe311

最新推荐文章于 2024-09-19 19:00:27 发布

阅读量1.9k

点赞数

分类专栏： vue 文章标签： vue分离配置文使得能够直接修改基本配置文件

本文链接：https://blog.csdn.net/p3118601/article/details/98497500

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue-cli3.x

添加一个serverConfig.json

{
    "AppId": "2982b7ca5a",
    "token": "0F33CFBA-B4E0-4A9C-A54B-2B2DABEE7B15",
    "baseUrl": ""
}

添加一个vue.config.js文件

var GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const serverConfig = require('./serverConfig.json') // 引入配置文件
const createServerConfig = function(compilation) {
    return JSON.stringify(serverConfig);
};
module.exports = {
    configureWebpack: {
        plugins: [
            new GenerateAssetPlugin({
                filename: 'serverConfig.json',
                fn: (compilation, cb) => {
                    cb(null, createServerConfig(compilation));
                },
                extraFiles: []
            })
        ]
    }
};

在main.js中

Vue.prototype.getConfigJson = function() {
    Vue.prototype.$axios.get('serverConfig.json').then((result) => {
        // console.log(result);
        Vue.prototype.baseConfig = result;
        store.commit('token', result.authorizeKey);
        // Vue.prototype.baseUrl = result.data.baseUrl; //设置成Vue的全局属性
        new Vue({
            router,
            store,
            render: h => h(App)
        }).$mount('#app')
    }).catch((error) => {
        console.log(error)
    })
}
Vue.prototype.getConfigJson() //调用声明的全局方法

yarn run build生成可修改的配置文件，可以直接修改请求路径等，不需要重新打包