首页 > 代码库 > vue-cli快速构建Vue项目
vue-cli快速构建Vue项目
vue-cli是什么?
vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。
vue-cli怎么使用?
安装vue-cli之前,需要先装好vue 和 webpack
npm install -g vue //全局安装vue
npm install -g webpack //全局安装webpack
npm install -g vue-cli //全局安装vue-cli
注意:上面这些装过一次之后都不需要再安装了
比如说我的项目要生成在D:/project下面
那么先进到目录里
d:
cd project
使用vue-cli构建vue项目
vue init webpack projectName //生成项目名为projectName的模板
cd projectName
npm install //初始化安装依赖
这样子项目就安装完了,生成文件如下
。然后执行
npm run dev
在浏览器打开http://localhost:8080,则可以看到欢迎页了。看到这个就说明一切顺利
但是这个只能在本地跑,要如何在我们自己的服务器上访问呢?此时需要执行
npm run build
会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。
但是呢!!
把index.html和static上传到服务器的时候,index.html和static需要一起放到根目录下,这样就可以通过http://www.omwteam.com/index.html了。
如果你想把整个dist文件夹传上去,通过http://www.omwteam.com/dist/index.html,你会发现,引用的css和js路径都是错误的,那么怎么解决呢?这时候就需要自己修改一下配置了。
进入config/index.js
原来的配置的引用路径为
我自己更改为
然后重新构建一下:
npm run build
这样就能正常访问了。
vue-cli快速构建Vue项目
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。