Vue项目build打包后如何运行

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue项目build打包后如何运行相关的知识,希望对你有一定的参考价值。

参考技术A 之前用Vue做了一个登录系统的项目,使用npm run build命令进行打包,经过vue-cli3.0版本的优化,打包后的dist文件夹体积非常小,我的才200K左右,可以看出Vue打包的优化十分不错,但是直接打开index.html是无法看到内容的,因为无法加载其中的内容,所以必须使用服务器来打开网页,我笔记本上装了express,所以就使用express来查看这个项目,介于有的朋友刚学Vue对于build打包后如何查看网页这点有疑问,我就给出解决办法:

1.全局安装express-generator生成器。

express-generator是express新版本分离出来的命令工具,想要使用express命令必须装这个依赖。

npm install express-generator -g // 也可使用cnpm比较快

2.创建一个express项目。

express expressName // expressName是项目名

3.进入项目目录,安装相关项目依赖。

cd expressName

npm install // 或cnpm install

4.将Vue build后生成的dist文件夹下的所有文件复制到express项目的publick文件夹下面,然后运行  npm start 来启动express项目。

5.打开浏览器,输入localhost:3000就可以看到效果了。

备注:这个3000是你自己设置的端口号,如果你设置888,那么你就要输入localhost:888。

但打包完后有时候点击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项目build打包后如何运行的主要内容,如果未能解决你的问题,请参考以下文章

vue项目打包步骤

vue-cli2 测试环境打包后的项目样式与正式环境打包后的样式不一致

vue-cli构建项目 npm run build后应该怎么运行在本地查看效果

vue饿了么项目-使用webpack打包项目

npm run build 打包后,如何运行在本地查看效果

npm run build 打包后,如何运行在本地查看效果