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

运行项目后出现此错误

未捕获的ReferenceError：未定义过程

如果我使用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' )
  })
]

如何使用Vue配置汇总？

1 个答案: