Vue路由器&；webpack：在生成时使用环境变量配置路由

我有一个vue.js应用程序，打算用于多种部署。对于一个部署，url应该是

/

。但是，对于其他应用程序，它可能需要是

/tool

。将使用环境变量设置这些路由：

TOOL\u ROUTE=/

或

TOOL\u ROUTE=/TOOL

问题是，使用vue路由器时，我需要在

main.js

中指定工具应该从url中获得什么：

require('babel-polyfill');
var Vue = require('vue');
var VueRouter = require('vue-router');
var Vuex = require('vuex');
var sync = require('vuex-router-sync').sync;
var App = require('./vue/App.vue');
var Content = require('./vue/Content.vue');
var Configurator = require('./vue/components/Configurator.vue');
var store = require('./vue/store/store.js');

var router;

Vue.use(Vuex);
Vue.use(VueRouter);

router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/tool', component: Content, name: 'home' },
    { path: '/tool/config', component: Configurator, name: 'config' }
  ]
});

sync(store, router);

new Vue({
  router: router,
  store: store,
  render: h => h(App)
}).$mount('#app');

---

在我编译时，有没有办法用env变量的值替换

/tool

？

在生成网页包时，您必须转发环境变量。您可以使用设置

节点_ENV

变量的相同方法来执行此操作

var route = process.env.TOOL_ROUTE || '/tool'; // default value if the variable isn't set

route = '"' + route + '"'; // encapsulate with "

console.log('Tool route:', route);

module.exports = {
  NODE_ENV: '"production"',
  TOOL_ROUTE: route // make sure it is exported
}

您现在可以访问代码中的值：

routes: [
    { path: process.env.TOOL_ROUTE, component: Content, name: 'home' },
    { path: process.env.TOOL_ROUTE + '/config', component: Configurator, name: 'config' }
  ]

注意：对于vue cli网页包模板，请在

config/prod.env.js

中执行此操作。这将在

dev

和

test

环境中合并

考虑到每次环境变量的值更改时都需要构建

---

你的意思是

过程环境工具\u路线
？是的。我正在寻找一个很好的方法来把它放到js中。我不确定问题出在哪里，因为这就是在main.js文件中检索环境变量的方式。这是关于
process.env
的文档，如果我在env中设置
TOOL_ROUTE
，然后修改
main.js
以使用
{path:process.env.TOOL_ROUTE，component:Content，name:'home'}
，那么这里定义的路由是
path:undefined
您如何设置
TOOL_ROUTE
？