Vue脚手架vue-cli 配置+打包代码切割+按需加载+路径问

一、安装、创建配置、运行、打包

全局安装 npm i vue-cli -g

新建文件夹中命令行输入 vue init webpack  xxxx(xxxx为项目名称)

之后填写一系列描述等（省略），生成的目录结构如下：

目录结构

cd xxxx(xxxx为项目名称)切换到当前项目

npm run dev 在localhost:8080 热加载项目

npm run build 进行打包压缩

二、打包问题

打包后生成dist文件夹

1.去掉css 和js 的map文件（体积过大）

map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 

有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

在build文件夹下的webpack.prod.conf.js文件中找到 devtool  和 cssProcessorOptions  都设置为 false，如下图

js去掉map文件 css去掉map文件

2.打包后执行dist文件夹中的index.html按F12发现全是css和js路径报错

找到config文件夹中的index.js文件找到 build 下的  assetsPublicPath 设置为 "./ " (原本为"/")

打包后的路径问题

三、按路由进行按需加载

在路由页面引入，如下图所示：

懒加载

打包后的js：

js切割后

四、关闭vue-cli eslint格式检测：

（格式很烦，引号只能用单引号或者双引号，末尾加了多余的分号等都要提醒，警告看着很恼火所以去掉提醒）

创建一个vue项目的时候，会有一个选择：Use ESLint to lint your code? (Y/n)，在这一步，我们选择no，或者找到build\webpack.base.conf.js去掉下图代码。

去除格式检测 去掉格式检测

五、打包后，字体路径出错：

找到build文件下的utils.js在如下图所示处加上这行代码publicPath: '../../',

字体路径报错

六、路由中@的含义：

@是webpack配置的引用路径，resolve里面有一个alias的配置项目，能够让开发者指定一些模块的引用路径。对一些经常要被import或者require的库,我们最好可以直接指定它们的位置，这样方便我们查找。

@的含义 @的含义