Nodejs安装及创建项目、vue打包静态文件不能运行解决办法

Nodejs安装

1、 nodejs官网下载：https://nodejs.org/en/download/
2、 安装nodejs：安装过程中只需要修改路径，其他点击下一步
3、 测试安装是否成功：进入cmd窗口
node -v
npm -v
4、 配置环境（主要是改变路径，不占用C盘内存）
5、 安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
检测：cnpm或 cnpm -v

vue安装

cnpm install vue
cnpm install -g vue-cli #不安装Vue-cli不能通WebStorm创建Vue项目
vue -V #查看版本

webpack安装

npm install webpack -g
npm i webpack-cli -g
webpack -v

创建项目并静态打包

切换到自己设定的文件夹所在路径下（D:\vue_projects）
① 创建新的初始化项目testdemo
vue init webpack testdemo 出现的结果一直按回车或者y即可。结束后初始化完成
② 安装依赖
D:\vue_projects>cd testdemo 进入项目文件夹
npm install 安装依赖
npm run dev 运行生成链接。
③对创建后的项目生成静态文件(打包)（位置在项目目录下的dist\index中）
Ctrl+c
D:\vue_projects\testdemo>npm run build

静态文件不能运行的原因及解决办法

原因：查看打包后的 index.html 源码，涉及到路径的地方全都是以 / 开头的

vue-cli 生成的模板项目打包后的文件，必须是根目录
解决方案：
①修改文件 /config/index.js，将 build.assetsPublicPath 属性的值由 / 改为 ./

②修改文件 /build/utils.js，在插件 ExtractTextPlugin 中添加 publicPath: ‘…/…/’

使用npm run buils重新打包即可。

参考文献：
[1]https://blog.csdn.net/xinpz/article/details/81871785
[2]https://blog.csdn.net/youxiyic/article/details/123571441?spm=1001.2014.3001.5506
[3]https://blog.csdn.net/heyy1997/article/details/121645002?spm=1001.2014.3001.5506
[4]https://www.jb51.net/article/200110.htm