文章/答案/技术大牛

发布

社区首页 >问答首页 >Vue-路由器& webpack:在构建时使用环境变量配置路由

问Vue-路由器& webpack:在构建时使用环境变量配置路由
EN

Stack Overflow用户

提问于 2017-10-02 16:57:00

回答 1查看 1.4K关注 0票数 2

我有一个用于多个部署的vue.js应用程序。对于一个部署，url应该是<domian>/。然而，对于其他方面，它可能需要是<domain>/tool。这些路由将使用环境变量：TOOL_ROUTE=/或TOOL_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？

webpack

vue.js

vue-router

回答 1

Stack Overflow用户

发布于 2018-08-01 14:13:10

在webpack构建过程中，您必须转发环境变量。您可以通过设置NODE_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 webpack模板，请在config/prod.env.js中这样做.这将在dev和test环境中合并。考虑到每次环境变量的值发生变化时，您都需要构建环境变量！

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46530141

复制

相似问题

问Vue-路由器& webpack:在构建时使用环境变量配置路由
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue-路由器& webpack:在构建时使用环境变量配置路由EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue-路由器& webpack:在构建时使用环境变量配置路由
EN