renren-fast-vue 【启动 打包错误】汇总
- 【1】
npm isntall
后无法正常启动 - 【2】
npm run build
打包出错
【1】解决方法
更换数据源
- 网络问题,使用淘宝加速,并且修改
node-sass
下载地址
前端安装完 node 后,最好设置下淘宝的镜像源,不建议使用 cnpm(可能会出现奇怪的问题)
npm config set registry https://registry.npm.taobao.org
# 配置后可通过下面方式来验证是否成功
npm config get registry
# 在 ~/.npmrc 加入下面内容,可以避免安装 node-sass 失败
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
.npmrc 文件位于
win10:C:\Users\[你的账户名称]\.npmrc
linux:直接使用 vi ~/.npmrc
node-sass 没有正常安装
修改根目录下订单
package.json
文件
使用最新版本的node-sass
【2】解决办法
问题展示
- renren-fast-vue1.2.2编译报
primordials is not defined
问题
错误原因
查看资料发现,网上大部分都也给出原因是由于gulp3.x与node.js11.5x以上版本不兼容问题。
- 升级gulp4.0
- 降低node11版本以下
但是大多数都是建议如何降低node版本,node也不断在更新迭代,降低版本
是治标不治本,对于这个,我还是喜欢升级gulp到4.0,但随之而来的是4.0和3.0语法上有很大差异,所以必须重新编写根目录gulpfile.js
文件。
原文件
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var path = require('path');
var del = require('del');
var distPath = path.resolve('./dist');
var version = ''; // 版本号
var versionPath = ''; // 版本号路径
var env = ''; // 运行环境
// 创建版本号(年月日时分)
(function () {
var d = new Date();
var yy = d.getFullYear().toString().slice(2);
var MM = d.getMonth() + 1 >= 10 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1);
var DD = d.getDate() >= 10 ? d.getDate() : '0' + d.getDate();
var h = d.getHours() >= 10 ? d.getHours() : '0' + d.getHours();
var mm = d.getMinutes() >= 10 ? d.getMinutes() : '0' + d.getMinutes();
version = yy + MM + DD + h + mm;
versionPath = distPath + '/' + version;
})();
// 编译
gulp.task('build', $.shell.task([ 'node build/build.js' ]));
// 创建版本号目录
gulp.task('create:versionCatalog', ['build'], function () {
return gulp.src(`${distPath}/static/**/*`)
.pipe(gulp.dest(`${versionPath}/static/`))
});
// 替换${versionPath}/static/js/manifest.js window.SITE_CONFIG.cdnUrl占位变量
gulp.task('replace:cdnUrl', ['create:versionCatalog'], function () {
return gulp.src(`${versionPath}/static/js/manifest.js`)
.pipe($.replace(new RegExp(`"${require('./config').build.assetsPublicPath}"`, 'g'), 'window.SITE_CONFIG.cdnUrl + "/"'))
.pipe(gulp.dest(`${versionPath}/static/js/`))
});
// 替换${versionPath}/static/config/index-${env}.js window.SITE_CONFIG['version']配置变量
gulp.task('replace:version', ['create:versionCatalog'], function () {
return gulp.src(`${versionPath}/static/config/index-${env}.js`)
.pipe($.replace(/window.SITE_CONFIG\['version'\] = '.*'/g, `window.SITE_CONFIG['version'] = '${version}'`))
.pipe(gulp.dest(`${versionPath}/static/config/`))
});
// 合并${versionPath}/static/config/[index-${env}, init].js 至 ${distPath}/config/index.js
gulp.task('concat:config', ['replace:version'], function () {
return gulp.src([`${versionPath}/static/config/index-${env}.js`, `${versionPath}/static/config/init.js`])
.pipe($.concat('index.js'))
.pipe(gulp.dest(`${distPath}/config/`))
});
// 清空
gulp.task('clean', function () {
return del([versionPath])
});
gulp.task('default', ['clean'], function () {
// 获取环境配置
env = process.env.npm_config_qa ? 'qa' : process.env.npm_config_uat ? 'uat' : 'prod'
// 开始打包编译
gulp.start(['build', 'create:versionCatalog', 'replace:cdnUrl', 'replace:version', 'concat:config'], function () {
// 清除, 编译 / 处理项目中产生的文件
del([`${distPath}/static`, `${versionPath}/static/config`])
})
});
原文件
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var path = require('path');
var del = require('del');
var distPath = path.resolve('./dist');
var version = ''; // 版本号
var versionPath = ''; // 版本号路径
var env = process.env.npm_config_qa ? 'qa' : process.env.npm_config_uat ? 'uat' : 'prod'; // 运行环境
// 创建版本号(年月日时分)
(function () {
var d = new Date();
var yy = d.getFullYear();
var MM = d.getMonth() + 1 >= 10 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1);
var DD = d.getDate() >= 10 ? d.getDate() : '0' + d.getDate();
var h = d.getHours() >= 10 ? d.getHours() : '0' + d.getHours();
var mm = d.getMinutes() >= 10 ? d.getMinutes() : '0' + d.getMinutes();
version = yy + MM + DD + h + mm;
versionPath = distPath + '/' + version;
})();
// 编译
gulp.task('build', $.shell.task([ 'node build/build.js' ]));
// 创建版本号目录
gulp.task('create:versionCatalog', function () {
return gulp.src(`${distPath}/static/**/*`)
.pipe(gulp.dest(`${versionPath}/static/`))
});
// 替换${versionPath}/static/js/manifest.js window.SITE_CONFIG.cdnUrl占位变量
gulp.task('replace:cdnUrl', function () {
return gulp.src(`${versionPath}/static/js/manifest.js`)
.pipe($.replace(new RegExp(`"${require('./config').build.assetsPublicPath}"`, 'g'), 'window.SITE_CONFIG.cdnUrl + "/"'))
.pipe(gulp.dest(`${versionPath}/static/js/`))
});
// 替换${versionPath}/static/config/index-${env}.js window.SITE_CONFIG['version']配置变量
gulp.task('replace:version', function () {
return gulp.src(`${versionPath}/static/config/index-${env}.js`)
.pipe($.replace(/window.SITE_CONFIG\['version'\] = '.*'/g, `window.SITE_CONFIG['version'] = '${version}'`))
.pipe(gulp.dest(`${versionPath}/static/config/`))
});
// 合并${versionPath}/static/config/[index-${env}, init].js 至 ${distPath}/config/index.js
gulp.task('concat:config', function () {
return gulp.src([`${versionPath}/static/config/index-${env}.js`, `${versionPath}/static/config/init.js`])
.pipe($.concat('index.js'))
.pipe(gulp.dest(`${distPath}/config/`))
});
//清除, 编译 / 处理项目中产生的文件
gulp.task('cleanBuild', function () {
return del([`${distPath}/static`, `${versionPath}/static/config`])
});
// 清空
gulp.task('clean', function () {
return del([versionPath])
});
//gulp.series|4.0 依赖
//gulp.parallel|4.0 多个依赖嵌套
gulp.task('default',gulp.series(gulp.series('build','create:versionCatalog','replace:cdnUrl','replace:version','concat:config','cleanBuild')));
升级 gulp.4.0方法
# 卸载全局的 gulp
npm uninstall gulp -g
# 安装全局的 gulp 4.0
# npm install "gulpjs/gulp-cli#4.0" -g
# npm install "gulpjs/gulp#4.0" -g
npm i gulp@4
# 到项目目录里删掉本地的 gulp
npm rm gulp --save-dev
# 安装本地的 gulp 4.0
npm install "gulpjs/gulp#4.0" --save-dev
参考
https://blog.csdn.net/yangchangsheng123/article/details/105763078