vue项目如何打包上线--笔记

1.第一步

npm  run build

然后会生成一个dist目录的文件夹
2.将dist文件夹拎出来，我本地已经打好localhost服务器，使用IIs搭建的，如果想输入：localhost:8001/project打开文件，需要在index.js文件配置：

index.js文件

如何让vue项目然后通过ip地址访问，需要在package.json配置项加个 --host 0.0.0.0

 "scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  }

3.

配置文件图片
build/utils.js

 if (options.extract) {
      return ExtractTextPlugin.extract({
       ···
        publicPath:'../../', //这里是添加的
        ····
  })

build/webpack.prod.conf.js

output: {
    ···
    publicPath: process.env.NODE_ENV === 'production'
      ? './' +config.build.assetsPublicPath
      : './' + config.dev.assetsPublicPath,//这里是添加的
  ···
  },

config/index.js

 build: {
  ···
    assetsPublicPath: './',//这里是添加的
  ···
  }

4.重复第一步npm run build
因为这边我是本地搭建的服务器，菜菜的我不会写接口，只能模拟了，我这边是在服务器指定文件夹下建了个api文件夹，里面放对应的json文件，如果是团队开发，只要把dist文件扔给后端，后端会写好接口的，嗯就这样
5.运行结果对比

开发环境运行，端口：8080 本地‘线上‘环境运行端口：8001

6.进一步优化
当项目日趋庞大，打包后的app.js会越大，-----异步组件加载

异步加载