资源路径

build/utils.js

@@ -15,11 +15,12 @@ exports.assetsPath = function (_path) {
 
 exports.cssLoaders = function (options) {
   options = options || {}
-
+  // console.log(options)
   const cssLoader = {
     loader: 'css-loader',
     options: {
-      sourceMap: options.sourceMap
+      sourceMap: options.sourceMap,
+      publicPath: '../../'
     }
   }
 
@@ -33,12 +34,13 @@ exports.cssLoaders = function (options) {
   // generate loader string to be used with extract text plugin
   function generateLoaders (loader, loaderOptions) {
     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
-
+    // console.log('aaaa')
     if (loader) {
       loaders.push({
         loader: loader + '-loader',
         options: Object.assign({}, loaderOptions, {
-          sourceMap: options.sourceMap
+          sourceMap: options.sourceMap,
+          publicPath: '.../../'
         })
       })
     }
@@ -46,7 +48,13 @@ exports.cssLoaders = function (options) {
     // Extract CSS when that option is specified
     // (which is the case during production build)
     if (options.extract) {
+      // console.log(MiniCssExtractPlugin.loader)
       return [MiniCssExtractPlugin.loader].concat(loaders)
+      // return ExtractTextPlugin.extract({
+      //   use: loaders,
+      //   fallback: 'vue-style-loader',
+      //   publicPath: '../../'
+      // })
     } else {
       return ['vue-style-loader'].concat(loaders)
     }

build/vue-loader.conf.js

@@ -5,7 +5,6 @@ const isProduction = process.env.NODE_ENV === 'production'
 const sourceMapEnabled = isProduction
   ? config.build.productionSourceMap
   : config.dev.cssSourceMap
-
 module.exports = {
   loaders: utils.cssLoaders({
     sourceMap: sourceMapEnabled,

build/webpack.base.conf.js

-'use strict'
-const path = require('path')
-const utils = require('./utils')
-const config = require('../config')
-const vueLoaderConfig = require('./vue-loader.conf')
+"use strict";
+const path = require("path");
+const utils = require("./utils");
+const config = require("../config");
+const vueLoaderConfig = require("./vue-loader.conf");
+// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 function resolve(dir) {
-  return path.join(__dirname, '..', dir)
+  return path.join(__dirname, "..", dir);
 }
 
 const createLintingRule = () => ({
   test: /\.(js|vue)$/,
-  loader: 'eslint-loader',
-  enforce: 'pre',
-  include: [resolve('src'), resolve('test')],
+  loader: "eslint-loader",
+  enforce: "pre",
+  include: [resolve("src"), resolve("test")],
   options: {
-    formatter: require('eslint-friendly-formatter'),
+    formatter: require("eslint-friendly-formatter"),
     emitWarning: !config.dev.showEslintErrorsInOverlay
   }
-})
+});
 
 module.exports = {
-  context: path.resolve(__dirname, '../'),
+  context: path.resolve(__dirname, "../"),
   entry: {
-    app: './src/main.js'
+    app: "./src/main.js"
   },
   output: {
     path: config.build.assetsRoot,
-    filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
+    filename: "[name].js",
+    publicPath:
+      process.env.NODE_ENV === "production"
         ? config.build.assetsPublicPath
         : config.dev.assetsPublicPath
   },
   resolve: {
-    extensions: ['.js', '.vue', '.json'],
+    extensions: [".js", ".vue", ".json"],
     alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src'),
-      'src': resolve('src')
+      vue$: "vue/dist/vue.esm.js",
+      "@": resolve("src"),
+      src: resolve("src")
     }
   },
   module: {
@@ -43,46 +45,49 @@ module.exports = {
       // ...(config.dev.useEslint ? [createLintingRule()] : []),
       {
         test: /\.vue$/,
-        loader: 'vue-loader',
+        loader: "vue-loader",
         options: vueLoaderConfig
       },
-
       {
         test: /\.js$/,
-        loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+        loader: "babel-loader",
+        include: [
+          resolve("src"),
+          resolve("test"),
+          resolve("node_modules/webpack-dev-server/client")
+        ]
       },
       {
         test: /\.svg$/,
-        loader: 'svg-sprite-loader',
-        exclude: path.resolve(__dirname, './src/assets/icons'),
-        include: [resolve('src/icons')],
+        loader: "svg-sprite-loader",
+        exclude: path.resolve(__dirname, "./src/assets/icons"),
+        include: [resolve("src/icons")],
         options: {
-          symbolId: 'icon-[name]'
+          symbolId: "icon-[name]"
         }
       },
       {
         test: /\.(png|jpe?g|gif)(\?.*)?$/,
-        loader: 'url-loader',
+        loader: "url-loader",
         options: {
           limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+          name: utils.assetsPath("img/[name].[hash:7].[ext]")
         }
       },
       {
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        loader: 'url-loader',
+        loader: "url-loader",
         options: {
           limit: 10000,
-          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+          name: utils.assetsPath("media/[name].[hash:7].[ext]")
         }
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
+        loader: "url-loader",
         options: {
           limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+          name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
         }
       }
     ]
@@ -93,10 +98,10 @@ module.exports = {
     setImmediate: false,
     // prevent webpack from injecting mocks to Node native modules
     // that does not make sense for the client
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty'
+    dgram: "empty",
+    fs: "empty",
+    net: "empty",
+    tls: "empty",
+    child_process: "empty"
   }
-}
+};

build/webpack.prod.conf.js

@@ -20,7 +20,8 @@ const env =
 // console.log(webpack.optimize);
 const webpackConfig = merge(baseWebpackConfig, {
   module: {
-    rules: utils.styleLoaders({
+    rules: utils
+      .styleLoaders({
         sourceMap: config.build.productionSourceMap,
         extract: true,
         usePostCSS: true
@@ -60,9 +61,7 @@ const webpackConfig = merge(baseWebpackConfig, {
       "process.env": env
     }),
     new WriteJsonPlugin({
-      object: {
-        
-      },
+      object: {},
       path: "",
       // default output is timestamp.json
       filename: "data.json",

config/index.js

@@ -49,8 +49,9 @@ module.exports = {
 
     // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
+    assetsSubDirectory: '../../static',
     assetsPublicPath: './',
+    publicPath: '../../',
 
     /**
      * Source Maps
@@ -59,7 +60,7 @@ module.exports = {
     productionSourceMap: false,
     // https://webpack.js.org/configuration/devtool/#production
     devtool: '#source-map',
-    inlineSource: true,
+    inlineSource: false,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.
     // Before setting to `true`, make sure to: