以下是我在开发过程中遇到的一些问题,通过查阅,得以解决,在此记录。
1、npm install 没有安装devDependencies npm install won't install devDependencies
人生中第一次创建了一个vue工程,npm install之后,npm run dev,兴奋中夹着一点点紧张,What!报错了,仔细查看之后发现只安装了dependencies,没安装devDependencies。我是百思不得其解,在技术群里询问,其他人都没有遇到这个问题。
于是google搜索,没有搜到,于是用英文搜索,这才在stackOverflow(https://stackoverflow.com/questions/34700610/npm-install-wont-install-devdependencies)中到了答案,赶紧点个小星星,加入我的favorite。原来在官网中早有说明(https://docs.npmjs.com/cli/install)。
2、vue中引用图片的问题
我在vue的<template>中通过<img/>标签中通过相对路径使用工程中的图片没有任何问题,但是当我在data中使用相对路径引用图片发现就有问题了,编译之后的页面无法找到图片。搜索之后找到答案(https://segmentfault.com/q/1010000007930232)。
3、在一个域名下配置两个vue工程
首先来解释一下我们为什么要在一个域名下创建两个工程而不是在一个工程中完成所有功能。我们开发了一个微信公众号,原本在自定义菜单中实现了一些简单的下载和查看功能,后来我们要在微信公众号中添加业务的主要功能,而这一套功能,我们已经有了一个有了一个vue工程,稍加改动就可以使用。所以我们决定通过nginx配置url地址直接实现。
其实实现起来极其简单,我在nginx中入下配置:
但是,凡事总有但是......此时当你访问http://domain.com/apply/的时候你会发现引用的资源都找不到了!因为你引用的资源是
/static/js/app.js
这样的路径,此时你一定访问不到这个文件了,因为这个文件的真实路径是/apply/static/js/app.js
。怎么解决这个问题呢?方法也很简单,只需要在路由中加上bese属性,如下图:
export default new Router({
mode: 'history',
base: '/apply/',
之后,你就可以愉快地通过http://domain.com/和http://domain.com/apply来访问两个不同的工程了。
相关参考:
https://stackoverflow.com/questions/34700610/npm-install-wont-install-devdependencies
https://docs.npmjs.com/cli/install
https://segmentfault.com/q/1010000007930232
https://www.zhihu.com/question/46630687问题中papersnake的回答