网站的网站制作,网站建设销售的技巧话语,新闻发布会的流程,四川平昌县建设局网站1、前提
首先你要安装好nodejs和yarn,直接在官网下载安装包#xff0c;一键安装即可#xff0c;不需要什么环境配置#xff0c;我安装的是最新版本#xff08;node-v10.13.0、yarn-1.12.3#xff09;
2、安装
同时写Vue CLI 3和Vue CLI 2 的原因是官方默认的是3#x…1、前提
首先你要安装好nodejs和yarn,直接在官网下载安装包一键安装即可不需要什么环境配置我安装的是最新版本node-v10.13.0、yarn-1.12.3
2、安装
同时写Vue CLI 3和Vue CLI 2 的原因是官方默认的是3而自己学习的GitHub上的项目为2~ 2.1 新版本 Vue CLI 3 写这篇文章的时候官网默认的为Vue CLI 3
npm install -g vue/cli
# OR
yarn global add vue/cli
2.2 旧版本 Vue CLI 2 3、创建项目
Vue CLI 3:
vue create hello-world Vue CLI 2:
vue init webpack my-project 一直按回车为默认选项手动设置请参考官方文档 4、运行项目 Vue CLI 3: cd hello-world
yarn serve Vue CLI 2: cd my-project/
npm run dev
5、验证
在浏览器输入localhost:8080看见下图图所示的效果即为成功
6、构建
yarn build
# OR
npm run build 会生成一个dist文件夹
7、部署 7.1 本地预览
dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 baseUrl 配置为了一个相对的值)所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器例如 serve
安装serve
npm install -g serve 启动
serve -s dist
INFO: Accepting connections at http://localhost:5000 预览http://localhost:5000
7.2 部署到tomcat
默认的配置直接部署到tomcat是有错误的(在浏览器检查里发现是找不到对应的静态文件原因是路径不对)需要修改一下配置版本2和版本3的配置也不一样
Vue CLI 3: 在hello-world新建vue.config.js并添加如下内容
module.exports {baseUrl: process.env.NODE_ENV production? /hello-world/: /
} 这里参考官方文档https://cli.vuejs.org/zh/guide/deployment.html#platform-guides
Vue CLI 2: 找到my-project/config/index.js文件中build对应的assetsPublicPath键值将其修改为
assetsPublicPath: ./, 这里参考https://blog.csdn.net/Dear_Mr/article/details/72871919
重新build将生成的dist文件夹复制到tomcat目录下的webapps文件夹下可以将dist文件夹改名为hello-world那么访问路径就为 ip/hello-world,也可以不改名那么访问路径就为ip/dist,效果查看vue.dongkelun.com/hello-world、vue.dongkelun.com/dist
8、其他问题
8.1 npm run dev启动后用Ctrlc关闭不了对应的进程
原因是在Git Bash Here里执行的命令一种方法是在windows 的shell里执行命令输入cmd进入另一种办法是如果不想放弃git的命令行的话每次启动完用tskill node杀死进程。
8.2 依然想用 npm run dev 启动上面的hello world程序
办法是修改package.json文件找到scripts下的”serve”: “vue-cli-service serve”,复制这一行到下一行将keyserve改为dev即可
自己可以对比一下两个版本的package.json文件的差异多尝试一下就了解了参考https://dongkelun.com/2018/11/19/vueCliCreateProject/
