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>