如何使用 webpack 打開帶有 gulp 任務的 VueJS 的生產模式

Question

我已經像這樣設置了我的 gulpfile.js：

'use strict';
const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const rename = require('gulp-rename');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const webpack = require('webpack-stream');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const scriptsPath = 'Scripts/**/*.js';
const stylesPath = 'Styles/**/*.scss';


gulp.task('js:prod', () => {
gulp.src(scriptsPath)
    // First process thru Webpack
    // setting the mode to 'production'
    .pipe(webpack({
        mode: 'production'
    }))
    // then transpile to ES5
    .pipe(babel({
        presets: ['@babel/env']
    }))
    // then minify and uglify
    .pipe(uglify())
    // rename the output file
    .pipe(rename('site.min.js'))
    // write output file to destination
    .pipe(gulp.dest('wwwroot/js'));
});

package.json 文件：

{
  "name": "myApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "autoprefixer": "^9.1.3",
    "cssnano": "^4.1.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0-beta.2",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.0",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.1",
    "webpack-stream": "^5.1.1"
  }
}

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MyApp</title>

    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="container">
        <main>
            @RenderBody()
        </main>
    </div>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
</body>
</html>

並且在這個site.min.js管道之后，瀏覽器讀取site.min.js仍然在控制台中顯示You are running Vue in development mode 。

嘗試過在Vue部署中顯示的事情：使用Browserify，envify，但沒有成功。 我是新手，很快就會迷失在這個包裹地獄中。 我覺得我需要一些指導。 這是缺少Webpack，而webpack-stream 還不夠嗎？

Answer 1

使用終端像這樣設置NODE_ENV

export NODE_ENV=production

您可以使用 echo 檢查此設置是否正確

echo $NODE_ENV

如何使用 webpack 打開帶有 gulp 任務的 VueJS 的生產模式

問題描述

1 個解決方案

解決方案1
0 2020-03-29 13:02:31

如何使用 webpack 打開帶有 gulp 任務的 VueJS 的生產模式

問題描述

1 個解決方案

解決方案1 0 2020-03-29 13:02:31

解決方案1
0 2020-03-29 13:02:31