Vue项目打包坑之总结

这里记录一些自己在打包 Vue Web 项目时，执行如下命令时遇到的一些问题。有缘人可以借鉴一下~有问题的地方还望留言指出。以下所有需要修改的文件均是 build 文件夹下的文件。

npm run build

一、XX问题忘记了

1. 修改文件名称

webpack.prod.conf.js

2. 修改具体内容

注释掉一下两个部分

// const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

    // new OptimizeCSSPlugin({
    //   cssProcessorOptions: config.build.productionSourceMap
    //     ? { safe: true, map: { inline: false } }
    //     : { safe: true }
    // }),

二、各种找不到，net::，系列问题

1. 修改文件名称

（1）webpack.base.conf.js
（2）webpack.prod.conf
（3）config 文件夹下 index.js 文件

2. 修改具体内容

（1） “?”，":"，后面加上如图所示的东西
? ‘./’ + config.build.assetsPublicPath
: ‘./’ + config.dev.assetsPublicPath

  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? './' + config.build.assetsPublicPath
      : './' + config.dev.assetsPublicPath
  },

（2）添加 publicPath:’./’,

  output: {
    path: config.build.assetsRoot,
    publicPath:'./',
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

（3）修改 assetsPublicPath: ‘/’,

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

三、图标、背景图片没了

1. 修改文件名称

utils.js

2. 修改具体内容

添加： publicPath: ‘…/…/’

四、样式咋和 npm run dev 的时候不一样呢

1. 修改文件名称

main.js

2. 修改具体内容

import router from ‘./router’，需要放在所有 import 之后，最后加载，不覆盖其他样式。

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import './assets/iconfont/iconfont.css'
import 'element-ui/lib/theme-chalk/index.css'
import * as echarts from 'echarts'
import 'lib-flexible'
import axios from 'axios'
import BaiduMap from 'vue-baidu-map'
import VueParticles from 'vue-particles'
import router from './router'

3. 除此之外

注意添加 scoped

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }
</style>