最近大作业负责前端,我们前端是拿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