zoukankan      html  css  js  c++  java
  • vue-cli2 打包

    npm run build 打包安装 相当于静态资源

    解决vue-cli项目打包出现空白页和路径错误的问题

    路径错误的问题解决方式:

    打开config文件夹下的 index.js 找到如下图所示区域: 

    build中 assetsPublicPath: '/', 改为 assetsPublicPath: './',

    build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
    
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        productionSourceMap: true,
        devtool: '#source-map',
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
    
        bundleAnalyzerReport: process.env.npm_config_report
      }

    页面空白的问题解决如下

    router-view中的内容显示不出来。路由history模式。

    这个坑是当你使用了路由之后,在没有后端配合的情况下就手贱打开路由history模式的时候,打包出来的文件也会是一片空白的情况,

    很多人踩这个坑的时候花了很多时间,网上的教程基本上都是说的第一个坑,这个坑很少有人提起。

    这里并不是不能打开这个模式,这个模式需要后端设置的配合,详情可以看:路由文档

    内容有了可是本地图片显示错误:

    由此可见导致问题的原因仍然是路径问题,解决方法如下: 
    打开 build 文件夹下的 utils.js 文件,找到以下部分加入publicPath:'../../',即可。如下显示

    if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            publicPath:'../../',
            fallback: 'vue-style-loader'
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
      }
    

      

  • 相关阅读:
    Leetcode 811. Subdomain Visit Count
    Leetcode 70. Climbing Stairs
    Leetcode 509. Fibonacci Number
    Leetcode 771. Jewels and Stones
    Leetcode 217. Contains Duplicate
    MYSQL安装第三步报错
    .net 开发WEB程序
    JDK版本问题
    打开ECLIPSE 报failed to load the jni shared library
    ANSI_NULLS SQL语句
  • 原文地址:https://www.cnblogs.com/mary-123/p/10947723.html
Copyright © 2011-2022 走看看