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必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。

Vue项目编写完成后，一般需要打包压缩成新的文件，下面简单介绍一下是如何对Vue项目打包的。

工具/稿腔原料npm方法/步骤1npmrunbuild

2build进行中，一般这个过程需氏敬罩要一点点时间

3打包完成，可以看到有提示歼闹buildcomplete

4build完成时候可以在相中发现多了一个dist文件夹，里面包括一个css文件，js文件和index.html

5项目最终上线的内容是打包压缩的，也就是上面的dist文件，整个过程还是很简单的。

6需要注意一下，即使项目中仅仅修改了一丁点东西，都需要重新进行打包，执行上诉的 *** 作。

1.问题描述

在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制坦尺台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入

的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！

2.解决方法之一

静态资源static存放位置放在src目录下

你可能会问为什么放在src目录下？放在跟src同级目录下不可以吗？好吧，一开始我也是放在src同级目录下，但是在某个css文件中引入背景图片的时候打包之后图片失效，我是这样引入的

实践证明这个写法是错误的，这个会在你打包的时候直接抱一大堆错（如css-loader错误），连项目都跑不起来。

于是我用下面的写法：

这种写法也是不可以的，原因是你的静态资源文件static不在src目录，而在vue中src目录是相对根目录是src目录，所以如果你想用上面的写法，必须要把static放在src目录下。如上面图一图二

注意：不能把static/images/user.png写成 /static/images/user.png，否则图片还是失效。

以上是关于文件存放位置以及css中引入图片问题，如果是通过img标签引扒渣入图片的话，相对简单，直接写绝对地址就行了，并且静态资源static文件夹的位置可以在src里面，也可以放在与src同级下，但是为了不出现上面情况，放在src里面即可！

img引入图片：

以上是一种解决图片失效问题的方法，当然，如果非要把static静态资源目录放在与src同级目录下，也是有解决方让此高法，例如通过导入图片的方式（本人未实践），可以自行尝试！

---