关于vue-cli + webpack打包给后台,部署上线

首先需要修改一下配置文件再打包，很多人都是遇到过打包后运行一片空白等等问题，这些问题主要就是路径的问题，所以需要修改config下面的index.js这个配置文件里选项：

上图中第一个要修改的就是静态文件的路径，打包后静态文件就在当前目录下，所以修改为./

第二个是环境设置为生产环境

修改好后打开cmd运行下面的命令打包即可：

注意下面的tip，告诉你这个打包后的文件需要放到服务器才能打开，不能直接使用浏览器打开，打包后的文件结构如下：

 

 

常见问题：css中引用的图片资源找不到

我的login.vue文件中有一段css，其中引用了一个背景图片，是这样写的

1	.login{height:100%;background: url("../assets/login_bg.jpg") no-repeat; background-size: cover;color: white;}

“src/assets/”文件夹下有这张图片，打包后路径发生变化这个图片就找不到了，stackflow上有一个解决办法，很简单

打开“build/utils.js”，增加一行代码即可

打包好后可以自己测试运行是否正常

这个时候需要利用node中的express,方法如下:

安装express: npm install -g express;

最新express4.0版本中将命令工具分家出来了,还需要安装一个命令工具: npm install -g express-generator;

创建一个express工程: express helloworld;

进入项目主目录: cd helloworld;

安装必备包: npm install;

启动程序: npm start;

把打包后的dist文件夹放在public文件夹里,访问http://localhost:3000/dist就能看到项目了,这样测试好了后,就可以丢后台了