fix: fix don't render build in production env 🐛

build/webpack.prod.conf.js

@@ -37,73 +37,72 @@ const webpackConfig = merge(baseWebpackConfig, {
     filename: utils.assetsPath('js/[name].[chunkhash].js'),
     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
   },
-  optimization: {
-    minimizer: [
-      new UglifyJsPlugin({
-        cache: true,
-        parallel: true,
-        sourceMap: config.build.productionSourceMap // set to true if you want JS source maps
-      }),
-      // Compress extracted CSS. We are using this plugin so that possible
-      // duplicated CSS from different components can be deduped.
-      new OptimizeCSSAssetsPlugin({})
-    ],
+  // optimization: {
+    // minimizer: [
+    //   new UglifyJsPlugin({
+    //     cache: true,
+    //     parallel: true,
+    //     sourceMap: config.build.productionSourceMap // set to true if you want JS source maps
+    //   }),
+    //   // Compress extracted CSS. We are using this plugin so that possible
+    //   // duplicated CSS from different components can be deduped.
+    //   new OptimizeCSSAssetsPlugin({})
+    // ],
     // @desc:  Documentation：https://www.webpackjs.com/plugins/split-chunks-plugin/
-    splitChunks: {
-      // chunks: "initial"，"async"和"all"分别是：初始块，按需块或所有块；
-      chunks: 'async',
-      // （默认值：30000）块的最小大小
-      minSize: 30000,
-      // （默认值：1）分割前共享模块的最小块数
-      minChunks: 6,
-      // （缺省值5）按需加载时的最大并行请求数
-      maxAsyncRequests: 8,
-      // （默认值3）入口点上的最大并行请求数
-      maxInitialRequests: 8,
-      // webpack 将使用块的起源和名称来生成名称: `vendors~main.js`,如项目与"~"冲突，则可通过此值修改，Eg: '-'
-      automaticNameDelimiter: '~',
-      name: true,
-      // cacheGroups is an object where keys are the cache group names.
-      cacheGroups: {
-        // 设置为 false 以禁用默认缓存组
-        default: false,
-        element: {
-          test: /node_modules\/element-ui\/(.*)\.js/,
-          // test: /node_modules\/(element-ui|lodash)\/(.*)\.js/,
-          name: 'element',
-          chunks: 'initial',
-          // 默认组的优先级为负数，以允许任何自定义缓存组具有更高的优先级（默认值为0）
-          reuseExistingChunk: true,
-          priority: -10,
-          enforce: true
-        },
-        vendor: {
-          test: /node_modules\/(.*)\.js/,
-          name: 'vendor',
-          chunks: 'async',
-          // 默认组的优先级为负数，以允许任何自定义缓存组具有更高的优先级（默认值为0）
-          priority: -10,
-          reuseExistingChunk: true,
-          enforce: true
-        },
-        styles: {
-          name: 'styles',
-          test: /\.(scss|css)$/,
-          chunks: 'all',
-          minChunks: 1,
-          // 选项 reuseExistingChunk 允许重复使用现有的块，而不是在模块完全匹配时创建新的块
-          reuseExistingChunk: true,
-          enforce: true
-        }
-      }
-    },
+    // splitChunks: {
+    //   // chunks: "initial"，"async"和"all"分别是：初始块，按需块或所有块；
+    //   chunks: 'async',
+    //   // （默认值：30000）块的最小大小
+    //   minSize: 30000,
+    //   // （默认值：1）分割前共享模块的最小块数
+    //   minChunks: 6,
+    //   // （缺省值5）按需加载时的最大并行请求数
+    //   maxAsyncRequests: 8,
+    //   // （默认值3）入口点上的最大并行请求数
+    //   maxInitialRequests: 8,
+    //   // webpack 将使用块的起源和名称来生成名称: `vendors~main.js`,如项目与"~"冲突，则可通过此值修改，Eg: '-'
+    //   automaticNameDelimiter: '~',
+    //   name: true,
+    //   // cacheGroups is an object where keys are the cache group names.
+    //   cacheGroups: {
+    //     // 设置为 false 以禁用默认缓存组
+    //     default: false,
+    //     element: {
+    //       test: /node_modules\/element-ui\/(.*)\.js/,
+    //       // test: /node_modules\/(element-ui|lodash)\/(.*)\.js/,
+    //       name: 'element',
+    //       chunks: 'initial',
+    //       // 默认组的优先级为负数，以允许任何自定义缓存组具有更高的优先级（默认值为0）
+    //       reuseExistingChunk: true,
+    //       priority: -10,
+    //       enforce: true
+    //     },
+    //     vendor: {
+    //       test: /node_modules\/(.*)\.js/,
+    //       name: 'vendor',
+    //       chunks: 'async',
+    //       // 默认组的优先级为负数，以允许任何自定义缓存组具有更高的优先级（默认值为0）
+    //       priority: -10,
+    //       reuseExistingChunk: true,
+    //       enforce: true
+    //     },
+    //     styles: {
+    //       name: 'styles',
+    //       test: /\.(scss|css)$/,
+    //       chunks: 'all',
+    //       minChunks: 1,
+    //       // 选项 reuseExistingChunk 允许重复使用现有的块，而不是在模块完全匹配时创建新的块
+    //       reuseExistingChunk: true,
+    //       enforce: true
+    //     }
+    //   }
+    // },
     // runtimeChunk: true, adds an additonal chunk to each entrypoint containing only the runtime.
-    runtimeChunk: {
-      name: 'manifest'
-    }
-  },
+    // runtimeChunk: {
+    //   name: 'manifest'
+    // }
+  // },
   plugins: [
-    // new webpack.optimize.ModuleConcatenationPlugin(),
     // http://vuejs.github.io/vue-loader/en/workflow/production.html
     new webpack.DefinePlugin({
       'process.env': env

config/index.js

@@ -1,13 +1,19 @@
 // see http://vuejs-templates.github.io/webpack for documentation.
-var path = require('path')
+const path = require('path')
+
+/*
+  @desc: You can specify a specific path prefix based on your deployment.
+*/
+// const STATIC_PATH = 'https://blog.lovejade.cn/jade/vue-boilerplate-template/'
+const publicPathPrefix = process.env.NODE_ENV === 'production' ? '/' : '/'
 
 module.exports = {
   build: {
     env: require('./prod.env'),
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: publicPathPrefix,
     productionSourceMap: false,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

index.ejs

@@ -24,7 +24,7 @@
     <meta name="msapplication-TileColor" content="#000000">
     <% for (var chunk of webpack.chunks) {
       for (var file of chunk.files) {
-        if (file.match(/\.(js|css)$/)) { %>
+        if (file.match(/\.(css)$/)) { %>
     <link rel="<%= chunk.initial ? 'preload' : 'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
     <% }}} %>
   </head>
@@ -33,11 +33,11 @@
     <noscript>
       This is your fallback content in case JavaScript fails to load.
     </noscript>
-    <div id="app"></div>
+    <div id="root"></div>
     <!-- built files will be auto injected -->
-    <script  src="<%= webpackConfig.output.publicPath %>static/js/vendor.dll.js"></script>
+    <script src="<%= webpackConfig.output.publicPath %>static/js/vendor.dll.js?v=0506"></script>
     <!-- Todo: only include in production(@OPEN PWA) -->
-    <%= htmlWebpackPlugin.options.serviceWorkerLoader %>
+    <!-- <%= htmlWebpackPlugin.options.serviceWorkerLoader %> -->
     <!-- built files will be auto injected -->
   </body>
   </body>

package.json

@@ -71,7 +71,6 @@
     "eslint-plugin-standard": "^2.0.1",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.14.1",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^0.10.0",
     "friendly-errors-webpack-plugin": "^1.1.3",
     "function-bind": "^1.1.0",

src/App.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'app',
+  name: 'App',
 
   created () {
   }

src/assets/scss/style.scss

@@ -1,4 +1,4 @@
-@import "bootstrap4/bootstrap.scss";
+// @import "bootstrap4/bootstrap.scss";
 @import 'variables.scss';
 @import 'mixins.scss';
 @import 'common.scss';

src/main.js

@@ -1,5 +1,5 @@
 import 'babel-polyfill'
-import Vue from 'vue'
+import * as Vue from 'vue/dist/vue.min.js'
 import './global.js'
 import './mixins/globalMixin.js'
 import App from './App'
@@ -20,4 +20,4 @@ new Vue({
   router,
   store,
   render: h => h(App)
-}).$mount('#app')
+}).$mount('#root')