vue项目打包步骤

vue项目打包

终端运行命令 npm run build

打包成功的标志与项目的改变，如下图：

点击index.html，通过浏览器运行，出现以下报错，如图：

那么应该如何修改呢？

具体步骤如下：

1、查看package.js文件的scripts命令

2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件

3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。

4、终端运行 npm run build 即可。

此时点击index.html，通过浏览器运行便，会发现动态绑定的static的图片找不到，故static必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。

安装依赖

配置备用环境变量

在根目录下创建.env.development文件，并添加环境变量

VUE_APP_SERVER_ID = 0

在根目录下创建.env.production文件，并添加环境变量

VUE_APP_SERVER_ID = 1

创建自动化部署脚本

在package.json同级目录下创建文件夹deploy

在deploy文件下创建config.js和servers.js和index.js

servers.js：配置服务器相关信息

config.js：发布前的一些处理

index.js：发布到服务器的处理逻辑

添加package.json中的scripts命令

效果如下

1.第一步

然后会生成一个dist目录的文件夹

2.将dist文件夹拎出来，我本地已经打好localhost服务器，使用IIs搭建的，如果想输入： localhost:8001/project 打开文件，需要在index.js文件配置：

如何让vue项目然后通过ip地址访问，需要在package.json配置项加个 --host 0.0.0.0

3.

build/webpack.prod.conf.js

config/index.js

4.重复第一步npm run build

因为这边我是本地搭建的服务器，菜菜的我不会写接口，只能模拟了，我这边是在服务器指定文件夹下建了个api文件夹，里面放对应的json文件，如果是团队开发，只要把dist文件扔给后端，后端会写好接口的，嗯就这样

5.运行结果对比

6.进一步优化

当项目日趋庞大，打包后的app.js会越大，-----异步组件加载

---