如何使用 Vue 配置汇总？

Question

我正在使用 Vue.js 进行项目，与 Rollup 捆绑在一起。

这是我的rollup.config.js 文件

import vue from 'rollup-plugin-vue2'
import less from 'rollup-plugin-less2';
import buble from 'rollup-plugin-buble'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import uglify from 'rollup-plugin-uglify'
import livereload from 'rollup-plugin-livereload'
import serve from 'rollup-plugin-serve'

const plugins = [
    vue({'css':'none'}),
    less({output: "dist/build.css"}),
    buble({exclude: 'node_modules/**'}),
    nodeResolve({browser: true, jsnext: true}),
    commonjs()
]

if (process.env.NODE_ENV === 'production') {
    plugins.push(uglify())
}

if (process.env.NODE_ENV === 'development') {
    plugins.push(livereload('dist'))
    plugins.push(serve({
        contentBase: "",
        open: true
    }))
}

export default {
    input: 'src/main.js',
    output: {
        file: 'dist/build.js',
        format: 'iife',
        sourcemap: true,
        //external: ["vue","vue-router"],
    },
    //external: ["vue","vue-router"],
    plugins
}

这是我的main.js 文件。

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";

Vue.use(VueRouter);

const Foo = {template: '<div>foo</div>'}
const Bar = {template: '<div>bar</div>'}

const routes = [
    {path: '/foo', component: Foo},
    {path: '/bar', component: Bar}
];

const router = new VueRouter({
    routes
});

var app = new Vue({
    router: router,
    el: '#app',
    render: h => h(App)
});

运行项目后出现此错误

未捕获的引用错误：未定义进程

如果我使用 Vue 作为外部库并取消注释这个 ["vue","vue-router"], external: ["vue","vue-router"] 一切正常。

如何使我的项目编译并使用rollup？

Answer 1

我遇到了同样的问题。在这里找到了解决方案：https://github.com/rollup/rollup/issues/487

您必须使用汇总替换插件来替换所有导入文件中对 process.env.NODE_ENV 的所有调用，如下所示：

plugins: [
  replace({
    'process.env.NODE_ENV': JSON.stringify( 'production' )
  })
]