鍍金池/ 問(wèn)答/HTML/ 關(guān)于iview-cli打包問(wèn)題

關(guān)于iview-cli打包問(wèn)題

問(wèn)題描述

用iview-cli生產(chǎn)的項(xiàng)目,打包過(guò)后不知如何處理,而且index_prod.html訪問(wèn)空白

問(wèn)題出現(xiàn)的環(huán)境背景及自己嘗試過(guò)哪些方法

早先得vue項(xiàng)目打包和這個(gè)打包出來(lái)的文件不同,訪問(wèn)方式也不同。

相關(guān)代碼

這是 webpack.prod.config.js 文件
// 請(qǐng)把代碼文本粘貼到下方(請(qǐng)勿用圖片代替代碼)


const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const fs = require('fs');

fs.open('./src/config/env.js', 'w', function(err, fd) {
    const buf = 'export default "production";';
    fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});
});

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

你期待的結(jié)果是什么?實(shí)際看到的錯(cuò)誤信息又是什么?

這是使用iview-cli打包出來(lái)訪問(wèn)的以及生成的dist文件夾

clipboard.png

clipboard.png

原來(lái)項(xiàng)目打包出來(lái)的結(jié)果:

clipboard.png

上線前我會(huì)先預(yù)覽打包后的項(xiàng)目,使用http-server可以訪問(wèn)

但是現(xiàn)在使用iview-cli項(xiàng)目過(guò)來(lái)的打包出來(lái)不知如何下手,希望大家?guī)臀医獯鹨幌?,謝謝

回答
編輯回答
毀與悔

你應(yīng)該是希望打包之后 js 放在 dist/static/js 文件夾里面,css 放在 dist/static/css 里面對(duì)吧
output 的 filename 和 chunkFilename 加上路徑試試

output: {
        publicPath: '/dist/',
        filename: 'static/js/[name].[hash].js',
        chunkFilename: 'static/js/[name].[hash].chunk.js'
    },

css 的 output 機(jī)上 static/css

2018年8月23日 12:09