目前项目应用的是 vue-cli, 自行修改了部分配置. 三个环境的情况跟你差不多, 测试 / 生产环境的层级比你还深.
先说下修改了哪些配置
1-build/utils.JS 下的 CSSLoaders 内的 generateLoaders 方法内部的
- // Extract CSS when that option is specified// (which is the case during production build)if (options.extract) {
- return ExtractTextPlugin.extract({
- use: loaders,
- fallback: 'vue-style-loader',
- publicPath: '../../'// 此处修改是矫正 iview 的 font 等文件夹打包路径错误
- })
- } else {
- return ['vue-style-loader'].concat(loaders)
- }
2-webpack.base.conf.JS 下的 module 对象内的 rules 针对图片类型的配置
- {
- test: /\.(PNG|jpe?g|gif|svg)(\?.*)?$/,
- loader: 'url-loader',
- options: {
- limit: 1024,
- name: utils.assetsPath('img/[folder]/[name].[ext]')
- // [folder]/ 是为了保留项目组件文件夹内部资源文件夹
- // 在打包后在 img 文件夹里面对应生成相同的文件夹, 方便维护
- // 另外取消了图片的 hash
- }
- },
- 3-config/index.JS
dev 的配置就不说了, 改了端口, 偶尔会修改下默认启动的 lolocalhost 用于移动调试
主要是 build 下的
assetsPublicPath:'./',// 改为./
目前这套配置运行良好. 图片那里的修改你可以照样引用原本的 cli 配置. 我这是根据项目需求变动的.
assetsPath 如下
- exports.assetsPath = function(_path) {
- const assetsSubDirectory = process.env.NODE_ENV === 'production'
- ? config.build.assetsSubDirectory
- : config.dev.assetsSubDirectory
- returnpath.posix.join(assetsSubDirectory, _path)
- }
来源: http://www.bubuko.com/infodetail-3204116.html