vue-cli3的vue.config.js文件配置，生成dist文件

//vue.config.json
const path = require('path');
// const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移動端模擬開發者工具 插件 （另：https://github.com/liriliri/eruda）
// const CompressionPlugin = require('compression-webpack-plugin'); //Gzip
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //Webpack包文件分析器
const publicPath = process.env.NODE_ENV === "production" ? "/static/" : "/"; //font scss資源路徑 不同環境切換控制


const webpack = require('webpack');
// vue.config.js
module.exports = {
  //基本路徑
  publicPath: './',
  //輸出文件目錄
  outputDir: 'dist',
  //是否在保存的時候檢查
  lintOnSave: true,
  //放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。
  assetsDir: 'static',
  //以多頁模式構建應用程序。
    pages: undefined,
  //是否使用包含運行時編譯器的 Vue 構建版本
    runtimeCompiler: false,
  //生產環境是否生成 sourceMap 文件，一般情況不建議打開
  productionSourceMap: false,
  //是否為 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個內核時自動啟用，僅作用於生產構建，在適當的時候開啟幾個子進程去並發的執行壓縮
  parallel: require('os').cpus().length > 1,
  // webpack配置
    //對內部的 webpack 配置進行更細粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: config => {
        /**
         * 刪除懶加載模塊的prefetch，降低帶寬壓力
         * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
         * 而且預渲染時生成的prefetch標簽是modern版本的，低版本瀏覽器是不需要的
         */
        //config.plugins.delete('prefetch');
        //if(process.env.NODE_ENV === 'production') { // 為生產環境修改配置...process.env.NODE_ENV !== 'development'
        //} else {// 為開發環境修改配置...
        //}
  },
  //調整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
    configureWebpack: config => {
        //生產and測試環境
        let pluginsPro = [
            // new CompressionPlugin({ //文件開啟Gzip，也可以通過服務端(如：nginx)(https://github.com/webpack-contrib/compression-webpack-plugin)
            //     filename: '[path].gz[query]',
            //     algorithm: 'gzip',
            //     test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$', ),
            //     threshold: 8192,
            //     minRatio: 0.8,
            // }),
            //    Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer)
            // new BundleAnalyzerPlugin(),
        ];
        //開發環境
        let pluginsDev = [
            //移動端模擬開發者工具(https://github.com/diamont1001/vconsole-webpack-plugin  https://github.com/Tencent/vConsole)
            // new vConsolePlugin({
            //     filter: [], // 需要過濾的入口文件
            //     enable: true // 發布代碼前記得改回 false
      // }),
      new webpack.ProvidePlugin({//引入jquery
        $:"jquery",
        jQuery:"jquery",
        "windows.jQuery":"jquery"
      })
        ];
        if(process.env.NODE_ENV === 'production') { // 為生產環境修改配置...process.env.NODE_ENV !== 'development'
            config.plugins = [...config.plugins, ...pluginsPro];
        } else {
            // 為開發環境修改配置...
            config.plugins = [...config.plugins, ...pluginsDev];
        }
  },
  css: {
        // 啟用 CSS modules
        modules: false,
        // 是否使用css分離插件
        extract: true,
        // 開啟 CSS source maps，一般不建議開啟
        sourceMap: false,
        // // css預設器配置項
        // loaderOptions: {
        //     sass: {
        //         //設置css中引用文件的路徑，引入通用使用的scss文件（如包含的@mixin）
        //         data: `
        //         $baseUrl: "/";
        //         @import '@/assets/scss/_common.scss';
        //         `
    //                             //data: `
    //                             //$baseUrl: "/";
    //                             //`
        //     }
        // }
    },
  // 選項...
  devServer: {
    // host: 'localhost',
        // host: "0.0.0.0",
        // https: false, // https:{type:Boolean}
        // open: true, //配置自動啟動瀏覽器  http://172.16.1.12:7071/rest/mcdPhoneBar/ 
        // hotOnly: true, // 熱更新
    port: 8089,
    // proxy:{
    //   '/': {
    //     target: 'http://192.168.0.125:3000/',
    //     changeOrigin: true,
    //     pathRewrite: {}
    //   },
      // "/rest/*": {
      //   target: "http://172.16.1.12:7071",
      //   changeOrigin: true,
      //   // ws: true,//websocket支持
      //   secure: false
      // },
      // "/pbsevice/*": {
      //   target: "http://172.16.1.12:2018",
      //   changeOrigin: true,
      //   //ws: true,//websocket支持
      //   secure: false
      // },
    // }

    // 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
    // pluginOptions: {
    //     'style-resources-loader': {//https://github.com/yenshih/style-resources-loader
    //         preProcessor: 'scss',//聲明類型
    //         'patterns': [
  //                               //path.resolve(__dirname, './src/assets/scss/_common.scss'), 
    //         ],
  //                       //injector: 'append'
    //     }
    // }
    
  },


  // configureWebpack: {//引入jquery
  //   plugins: [
  //     new webpack.ProvidePlugin({
  //       $:"jquery",
  //       jQuery:"jquery",
  //       "windows.jQuery":"jquery"
  //     })
  //   ]
  // },

}

 

package.json文件配置

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service --open --mode development serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "core-js": "^2.6.5",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "vue": "^2.6.10",
    "vue-awesome-swiper": "^3.1.3",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.6.0",
    "@vue/cli-plugin-eslint": "^3.6.0",
    "@vue/cli-service": "^3.6.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "bootstrap": "^4.3.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "vue-scroller": "^2.2.4",
    "vue-template-compiler": "^2.5.21"
  }
}

 原文鏈接

配置vue-cli3