vue打包遇到的坑

1.-webkie-box-orient:vertical沒大打包上，解決方案

/* ! autoprefixer: off */  
-webkit-box-orient: vertical; 
/* autoprefixer: on */ 

 2.打包靜態文件路徑報錯

首先修改配置文件。

vue2.x 修改config/index.js

　　

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    proxyTable: {},

    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

View Code

vue 3.x 在根目錄新建文件 vue.config.js

module.exports = {
    // 部署應用時的基本 URL
    publicPath: './',
    // build時構建文件的目錄 構建時傳入 --no-clean 可關閉該行爲
    outputDir: 'dist',
    // build時放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
    assetsDir: 'static',
    // 指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也能夠是一個絕對路徑。
    indexPath: 'index.html',
    // 默認在生成的靜態資源文件名中包含hash以控制緩存
    filenameHashing: true,
    // 是否在開發環境下經過 eslint-loader 在每次保存時 lint 代碼 (在生產構建時禁用 eslint-loader)
    lintOnSave: process.env.NODE_ENV !== 'production',
    // 是否使用包含運行時編譯器的 Vue 構建版本
    runtimeCompiler: false,
    // Babel 顯式轉譯列表
    transpileDependencies: [],
    // 若是你不須要生產環境的 source map，能夠將其設置爲 false 以加速生產環境構建
    productionSourceMap: false,
    // 設置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標籤的 crossorigin 屬性（注：僅影響構建時注入的標籤）

    crossorigin: '',
    // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標籤上啓用 Subresource Integrity (SRI)
    integrity: false,
    // 若是這個值是一個對象，則會經過 webpack-merge 合併到最終的配置中
    // 若是你須要基於環境有條件地配置行爲，或者想要直接修改配置，那就換成一個函數 (該函數會在環境變量被設置以後懶執行)。該方法的第一個參數會收到已經解析好的配置。在函數內，你能夠直接修改配置，或者返回一個將會被合併的對象
    configureWebpack: {},
    // 對內部的 webpack 配置（好比修改、增長Loader選項）(鏈式操做)
    chainWebpack: () => { },
    // css的處理
    css: {
        // 當爲true時，css文件名可省略 module 默認爲 false
        modules: true,
        // 是否將組件中的 CSS 提取至一個獨立的 CSS 文件中,看成爲一個庫構建時，你也能夠將其設置爲 false 省得用戶本身導入 CSS
        // 默認生產環境下是 true，開發環境下是 false
        extract: false,
        // 是否爲 CSS 開啓 source map。設置爲 true 以後可能會影響構建的性能
        sourceMap: false,
        //向 CSS 相關的 loader 傳遞選項(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
        loaderOptions: { css: {}, less: {} }
    },
    // 全部 webpack-dev-server 的選項都支持
    devServer: {
        open: true,
        host: '0.0.0.0',
        port: 3366,
        https: false,
        hotOnly: false,
        proxy: null,
        // proxy: {
        //     '/api': {
        //         target: '<url>',
        //         ws: true,
        //         changOrigin: true
        //     }
        // },
        before: app => { }
    },
    // 是否爲 Babel 或 TypeScript 使用 thread-loader
    parallel: require('os').cpus().length > 1,
    // 向 PWA 插件傳遞選項
    pwa: {},
    // 能夠用來傳遞任何第三方插件選項
    pluginOptions: {}
}

View Code

在頁面組件中，若img的src爲變量，則直接可把路勁寫爲<img src="static/imgs/icons/XXX.png"/>

 <img src="static/imgs/icons/hot-icon.png" alt>

這樣打包後在線上環境就能夠顯示了