vue打包（npm run build）

一、vue项目的创建
1、首先第一肯定是要有Node.js及npm这个不多说了
2、安装脚手架

二、vue项目的打包
1、大家都知道使用npm run build进行打包，这个时候你直接打开dist/下的index.html,会发现文件可以打开，但是所有的js，css，img等路径有问题是指向根目录的，

此时需要修改config/index.js里的assetsPublicPath的字段，初始项目是/他是指向项目根目录的也是为什么会出现错误，这时改为./

./ 当前目录
…/ 父级目录
/ 根目录
根目录：在计算机的文件系统中，根目录指逻辑驱动器的最上一级目录，它是相对子目录来说的；
　　　　它如同一棵大树的“根”一般，所有的树杈以它为起点，故被命名为根目录。以微软公司开发的Windows操作系统为例：
　　　　打开我的计算机（计算机），双击C盘就进入C盘的根目录。双击D盘就进入D盘的根目录
　　　　
build: {
env: require(’./prod.env’),
index: path.resolve(__dirname, ‘…/dist/index.html’),
assetsRoot: path.resolve(__dirname, ‘…/dist’),
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘./’,
productionSourceMap: true,
// 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:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: [‘js’, ‘css’],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// npm run build --report
// Set to true or false to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}

在从dist根目录打开index文件就可以访问了。

*常用技巧

1.如果在config -> index.js 中的 build 代码中的 productionSourceMap的值设为false ，打包后文件体积可以减少百分之八十

2.如果设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true，即会使打包生成的index.html中的js和css路径带有？+随机字符串，也就是版本控制