renren-fast-vue 【启动 打包错误】汇总

文章目录

renren-fast-vue 【启动 打包错误】汇总【1】解决方法更换数据源node-sass 没有正常安装 【2】解决办法问题展示 错误原因原文件原文件 升级 gulp.4.0方法

【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