vue-cli脚手架创建vue项目并打包运行

1 安装 NPM,安装nodejs自带NPM,这个不是重点不详细说。
2 安装 webpack,npm install webpack -g 执行全局安装,这个不是重点不详细说。
3 安装 vue-cli 执行命令:npm install -g vue-cli
4 查询vue版本 执行命令:vue -V
5 创建项目目录G:\net\web\vue-cli-demo,进入项目目录执行命令: vue init webpack
vue-cli脚手架创建vue项目并打包运行
6.执行命令:npm install,安装依赖看到以下项目结构,头大啊,看不懂目录结构的自学下 webpack
vue-cli脚手架创建vue项目并打包运行
7 运行项目执行命令:Npm run dev
8 如果出现错误8080端口错误,修改config/index.js文件内容,修改端口号
vue-cli脚手架创建vue项目并打包运行
9.再次运行项目执行命令:Npm run dev
10 本地运行成功,这里算完成80%。
11 打包上线,执行命令npm run build
12 打包完成后,会生成 dist 文件夹,项目上线时,只需要将 dist 文件夹放到服务器就行了。
vue-cli脚手架创建vue项目并打包运行vue-cli脚手架创建vue项目并打包运行
13.点击index.html,通过浏览器运行,出现以下报错,如图:
vue-cli脚手架创建vue项目并打包运行
那么应该如何修改呢?
具体步骤如下:
1、查看package.js文件的scripts命令
2、打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件
3、其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: ‘/’,然后修改为assetsPublicPath: ‘./’,即“/”前加点。
4、终端运行 npm run build 即可。