webpack 打包vue项目并发布到tomcat上

2019独角兽企业重金招聘Python工程师标准>>>

 

脚手架用的是vue-cli

下面是配置

main.js

const RouterConfig = {
    base: "TestProject",//此处为项目名，打包后的所有文件放入此文件夹内，需要在tomcat上手动创建该文件夹
    routes: Routers
};
const router = new VueRouter(RouterConfig);

webpack.prod.config.js

module.exports = merge(webpackBaseConfig, {
    output: {
        publicPath: "./dist/",
        filename: "[name].[hash].js",
        chunkFilename: "[name].[hash].chunk.js"
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "[name].[hash].css",
            allChunks: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendors",
            filename: "vendors.[hash].js"
        }),
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new HtmlWebpackPlugin({
            filename: "../index_prod.html",
            template: "./src/template/index.ejs",
            inject: false
        })
    ]
});

最后把生成的dist文件和index_prod.html放到tomcat  webapp 下的项目文件内

转载于:https://my.oschina.net/maxdeath/blog/1928196