问题发生:今天下午搭建一个已经用vue写好前端的后台项目时,在安装好node后,在前端项目所在的文件夹运行 npm run dev命令后,只加载出了空白页面。
结果如下图所示:
在网上查了半天,有的是因为webpack 是高版本,造成混用import和module.exports,
所以可以通过降低webpack版本解决。 譬如说:安装指定版本:npm install webpack@ -g。
然后删除node_modules文件夹,再重新运行npm命令。
我试了几次都没成,然后找到了现在的方法。如果你能跳出页面,就说明你已经设置了跟后台程序联动的端口号。
在你的已经打包好的前端项目中,找到bulid文件夹下的webpack.base.conf.js下修改50~54行为
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
然后重新运行 npm-install命令,再重新运行 npm run dev,启动vue。就可以看见页面已经完整加载出来。
另,如果用node官方镜像下载太慢,可以选择使用阿里的镜像源。命令如下:
#用npm安装cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
#设置registry
npm config set registry https://registry.npm.taobao.org
#读取registry
npm config get registry
#以后下载需要的包以下面命令格式输入即可
# cnpm install [name]
#安装vue-cli, 全局安装
cnpm install vue-cli -g
cnpm install
cnpm run dev