iview 项目打包记录

最近大作业负责前端，我们前端是拿iview(Vue的封装)写的，工程直接是在https://github.com/iview/iview-project基础上开发。

这是我们项目的结构

好了下面进入正题。iview的打包我搜便了网上都没有人写，他和一般的Vue工程打包不太一样。

首先 就是进入 项目的根目录(就是)上面的图片这个路径，执行 

npm run build 

如果成功 ，会生成两个文件 index.html 和一个dist 文件 里面有一些 css和js文件

注意不会生成什么static文件，那个index.html 也可以在 webpack.prod.config.js修改

new HtmlWebpackPlugin({
            filename: '../index.html',//修改此处
            template: './src/template/index.ejs',
            inject: false
})

也有可能会报很多错误。都是需要修改配置文件。我来说说我修改的配置文件。

webpack.base.config.js 这个文件中

//把这句话注释了
{
    test: /\.(html|tpl)$/,
    loader: 'html-loader'
}


output: {
    path: path.join(__dirname, '../dist')//这个就是你生成那些css样式文件位置，以及为什么会生成dist文件原因
},

webpack.prod.config.js中要修改：

fs.open('./src/config/env.js', 'w', function (err, fd) {
    const buf = 'export default "production";';
    fs.write(fd, buf, function(err, written, buffer) {});
    //fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){});将这句话改为上面那句话
});
output: {
        publicPath: 'http://114.116.32.137/dist/',//这句话要改成你们服务器的域名，这样才能找到那些css样式文件
        filename: '[name].[hash].js',
        chunkFilename: '[name].[hash].chunk.js'
},

现在大概就是这么多，如果要详细了解原理可以去这个链接：

https://www.jianshu.com/p/505825c4381a

build成功后，就只需要把dist文件和i那个生成的html文件 放到服务器上就ok啦

 

这是我们前端项目的githubhttps://github.com/tygkking/ZebraScienceFrontEnd