Javascript 从网页包条目传递变量

我有多个条目，如

假设这些文件（index.js）都是相同的，唯一改变的是其他路由导入

我会创建一个文件来保持干燥，但我需要传递一些信息来真正知道我要导入哪个路由器

例如，pageOne/index.js是

import Vue from 'vue'
import axios from 'axios'
import App from '../App'
import { store } from '../store';
import VueProgressBar from 'vue-progressbar'
import Router from '../routers/router';
import interceptor from '../../config/httpInterceptor.js';

console.log('in main', window.location.href)

const routerInstance = new Router('main');
routerInstance.createRouter()
    .then(router => {
        interceptor();

        if (!process.env.IS_WEB) Vue.use(require('vue-electron'));
        Vue.http = Vue.prototype.$http = axios;
        Vue.config.productionTip = false;
        Vue.use(VueProgressBar, {
            color: 'rgb(255, 85, 0)', failedColor: 'red', thickness: '5px'
        });

        new Vue({
            components: { App },
            router,
            store,
            template: '<App/>'
        }).$mount('#app');
    });

到

所以，如果有三个相同的js文件，其中只有一行正在更改，这是很糟糕的，但我不知道如何重构它，以便它可以重用。我需要向文件传递有关正在加载哪个页面的信息，例如，它是这样的

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js?page=main',

但是现在当我在index.js日志中

console.log('in main', window.location.href)

是的

因此，我不能要求不同的路由器在此基础上。我需要其他解决办法

---

编辑

@Daniel Lizik在评论部分建议使用环境变量。他还说使用网页配置来设置它。考虑到我会将我的entry对象重构为以下内容：

module.exports = {
  entry: {
    pageOne: './src/index.js',
    pageTwo: './src/index.js',
    pageThree: './src/index.js'
  }
};

我需要以某种方式配置webpack，以便在webpack导入文件之后立即设置环境变量

网页包可能会在该对象上循环并导入文件。就在它之后读这行

pageOne: './src/index.js',

我需要将一些env变量设置为“pageOne”，以便在执行index.js时，它可以检查该变量并导入正确的路由器

---

但是，我不知道如何实现这一点。

您不需要在入口点配置中传递查询参数。您必须从浏览器传递它。然后可以解析查询参数并将其传递给

newrouter（）

。您可以使用

urijs

节点模块以干净的方式解析查询参数

import URI from "urijs";
...
const uriObj = new URI(url);
const page = uriObj.query(true)[page] || "main";
const routerInstance = new Router(page);

---

在浏览器中，您可以使用页面参数输入url，如

http://localhost:9080/page=second

我不使用普通浏览器。这是electron应用程序，我无法“输入url”。那么我的入口点看起来如何？使用环境变量。最新的CreateReact应用程序与以前内置的webpack stringify插件一样，但必须在变量前面加上

react\uApp

Right。我用vue。。。但我只有我的入口点清单。为了将env变量设置为当前窗口，我需要知道webpack执行导入的确切位置，每次导入后，我需要将env变量更改为下一个窗口名。所以每个窗口都接收正确的路由器。这与vueplease无关，请阅读其余的注释，“我使用vue”只是旁注我的意思是我不知道在哪里，特别是何时设置环境变量

http://localhost:9080/#/

module.exports = {
  entry: {
    pageOne: './src/index.js',
    pageTwo: './src/index.js',
    pageThree: './src/index.js'
  }
};

pageOne: './src/index.js',

import URI from "urijs";
...
const uriObj = new URI(url);
const page = uriObj.query(true)[page] || "main";
const routerInstance = new Router(page);