如何运行vue项目（运行vue项目一直显示 加载中）

本篇文章给大家谈谈如何运行vue项目，以及运行vue项目一直显示 加载中对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、拉取Vue项目运行问题
• 2、如何使用docker部署vue项目
• 3、运行vue项目
• 4、Vue项目build打包后如何运行
• 5、运行vue项目前下载依赖包及运行（vue 教程三）

拉取Vue项目运行问题

从云上拉取的族桐vue项目一般会缺少node_modules，需要先安装node_modules，再运行。

安装node_modules，从项目目录进入命樱塌令行，运行命令：npm install

运行：npm run serve

如何进入项目目录，在文件中的项目目录下，直接在路径处输入cmd

有时候会兆颂坦遇到包找不到的情况，需要使用命令寻找：npm fund

有时候可能会遇到错误，需要修复包：npm audit fix

如何使用docker部署vue项目

熟悉vue项目的开发朋友应该了解，对于vue项目来说，上线其实就是执行npm run build 命令，然后将build出的dist文件夹上传到服务器上就可以了，对于现在的前后端分离项目来说，就是把dist放到nginx的html文件夹即可。

上传的过程既可以手动实现，也可以通过jenkins这类在线编译软件，总之，殊途同归。

除了上面两种还有一种现在比较火的部署方式，就是docker部署，当没郑雀然正如上面说的，docker也是要实现上面的操作，只不过有些差异而已。

针对docker部署需要了解的是，一般我们只需要拉取nginx镜像，把dist文件夹写入镜像即可，不需要去镜像里面执行拉取代码、执行编译、打包等操作。这些操作一般在写入镜像执行。

这样做的目的跟docker的理念是一致的，功能解耦，方便维丛早护，而且对于一些大公司来说，可能还需要将编译后的代码进行扫描等操作，如果在docker镜像内编译的话如果出现错误是不好定位问题的。

那么如何实现docker部署vue项目呢，操作如下参考：

文件目录如下：

在vueProject 根目录下新建Dockerfile文件，注意没有后缀，nginx镜像默认服务器的目录在/usr/share/nginx/html，内容如下：

build项目：

Build完成后会生成dist目录

然后在vueProject根目录下打开命令行执行如下命令生成镜像枯早：

注意最后是一个点，代表在当前目录执行Dockerfile

如果没报错说明执行成功，此时可以在docker镜像列表看到该镜像。

启动镜像：

—name vp 代表自定义启动的镜像名称

-dp 是-d,-p的简写

8088:80 代表在宿主机的8088端口映射镜像的80端口，因为nginx默认的服务器端口就是80

最后就是之前生成的镜像名称。

大功告成。

更多详情：javascript技术分享

运行vue项目

报错：

error code ERR_SOCKET_TIMEOUT

 error network Socket timeout

error network This is a problem related to network connectivity.

 error network In most cases you are behind a proxy or have bad network settings.

 error network

error network If you are behind a proxy, please make sure that the

 让世error network '滚滑汪proxy' config is set properly.  See: 'npm help config'

 verbose exit 1

解决办法：

# 清除缓存

npm config set proxy false

# 清除缓存

npm cache clean

一、进入项目目录大仔

npm install

二、执行

npm run serve

[img]

Vue项目build打包后如何运行

之前用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项目前下载依赖包及运行（vue 教程三）

例宴拍仿如：cd /d d:   /*----------跳转对应的路径晌纤------------*/

查看有哪些依赖文件

至此，项目已经贺租建立，执行npm run dev 运行项目，等待结果：然后进入下一步

关于如何运行vue项目和运行vue项目一直显示 加载中的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。