关于vue项目打包发布

关于vue项目打包发布

• 方法1：

  (此方法参考于这位大佬的文章 方法一）
  ①在项目文件下运行npm run build生成文件夹dist；
  ②此时，打开dist目录下的index.html文件会发现不仅一片空白，而且还在控制台里报很多错；
  ③到项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”即可；
  ④打开dist目录下的index.html，此时页面正常显示

• 方法2：

  (此方法搬运于这位大佬的文章 方法二)
  ①在项目文件下运行npm run build生成文件夹dist；
  ②全局安装express-generator生成器。
  express-generator是express新版本分离出来的命令工具，想要使用express命令必须装这个依赖；
  npm install express-generator -g // 也可使用cnpm比较快
  ③创建一个express项目。
  express expressName // expressName是项目名
  ④进入项目目录，安装相关项目依赖。
  cd expressName
  npm install // 或cnpm install
  ⑤将Vue build后生成的dist文件夹下的所有文件复制到express项目的public文件夹下面，然后运行 npm start 来启动express项目
  ⑥打开浏览器，输入localhost:3000就可以看到效果了

  • 方法3：

  (此方法搬运于这位大佬的文章 方法三）
  问题：打包后 打开报错 页面空白 config文件夹下没有index.js文件
  ①src/router/index.js 里的mode:‘history’ 改为 ‘hash’
  ②在项目根目录下创建文件 vue.config.js文件 ,在文件里写入
  module.exports = {
  assetsDir: ‘static’,
  parallel: false,
  publicPath: ‘./’,
  }