vueApp打包

2022-07-12 11:19:09

本地打包测试

http-server是一个基于node.js的简单的，零配置的命令行http服务器。
安装：npm install http-server -g
使用：http-server [path] [options]
npm run dev （或npm start）。
让项目通过localhost和ip都可以访问（若项目localhost可以访问，IP不能访问，那就去修改 config/index.js 里面的 host: ‘localhost‘ 为 host: ‘0.0.0.0‘）。
npm run build，生成dist目录。
不管之前有没有修改打包配置都不影响dist被http-server访问（以下是没有打包配置的项目）。
在dist下输入http-server -c 10，通过生成的地址访问项目。
要注意端口号，使用的是项目的端口号。

图片.png

使用hbuilder打包测试

在hbuilder里新建一个移动App的项目，选择空模板，填写项目名，语法选择ES5/ES6均可。
项目里的manifest.json文件保留，其余全部删除，然后把dist里面的东西全拷进去。

图片.png
首先，要保证index.html可以在浏览器里运行起来(验证项目基于hbuilder本身的一个服务器可不可以运行)。
没有进行打包配置是不能成功访问项目的，都是引入资源路径问题。
进行build配置
1）根目录下config/index.js找到里面build下面的assetsPublicPath:‘/‘，把它改成assetsPublicPath:‘./‘（或assetsPublicPath:‘‘）。

图片.png

配置完成后，通过hbuilder在浏览器就可以运行跳转了。但可能有一些静态图片资源访问不到（如果图片资源转化为了base64就不会出现这种问题）

2）解决静态图片资源访问不到的问题。
注：写web项目，静态资源（图片、音/视频）还是存放在static目录下比较好。

解决方案一：修改静态资源路径（这个方法我猜的，我测试成功）
根目录下/build/utils.js里面加一句代码约47-55行位置，publicPath:‘../../‘。看图：

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: ‘vue-style-loader‘,
        publicPath: ‘../../‘   // 这句就是加的代码，不要找错位置
      })
    } else {
      return [‘vue-style-loader‘].concat(loaders)
    }