Question

我有一个vue.js应用程序，适用于多个部署。对于一个部署，网址应为<domian>/。但是，对于其他人，可能需要<domain>/tool。这些路线将使用环境变量设置：TOOL_ROUTE=/或TOOL_ROUTE=/tool

问题是，使用vue-router，我需要在main.js中指定工具应该从网址中获得的内容：

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');

有没有办法在编译时用{vv}的值取代/tool？

Answer 1

您必须在Webpack构建过程中转发环境变量。您可以使用设置NODE_ENV变量的相同方法进行操作。

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

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

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

module.exports = {
  NODE_ENV: '"production"',
  TOOL_ROUTE: configuration // 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环境中合并。

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

Vue-router＆amp; webpack：在构建时使用环境变量配置路由

1 个答案: