`

Webpack4.x 解决本地和生产地址不一致,使用绝对地址

阅读更多

依赖关系:

"webpack": "^4.12.0",

"webpack-cli": "^3.0.3",

"vue": "^2.5.16",

"vue-loader": "^14.2.2",

 

Webpack配置output内容:参考

 

// :关键点:
const publicPath = isProd ? '/vue/' : '/';

output: {
  path: path.resolve('dist' + publicPath),
  publicPath: publicPath,
  filename: `js/[name]${isProd ? '.[hash:7]' : ''}.js`
},

// 关键点: 上面的publicPath相当于Webpack 的 DefinePlugin执行了↓
new webpack.DefinePlugin({
  'process.env.ASSET_PATH': JSON.stringify(extPath),
}),

 

 

Vue组件A标签使用href路径:

// 测试环境路径为: /tools

// 生产环境路径为: /vue/tools

 

<a :href="`${__webpack_public_path__}tools/fifa`">
const link = `${__webpack_public_path__}tools/fifa`
// Property or method "__webpack_public_path__" is not defined on the instance but referenced during render
需要注册__webpack_public_path__给vue的data
data () {
  this.__webpack_public_path__ = __webpack_public_path__
  return {
    ...
  }
}

  

 

解决:保证开发和生产环境路径一致

 

 

图片路径问题:

{
  test: /\.(jpe?g|png|gif|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        fallback: 'file-loader',
        limit: 10000,
        // 设置导出路径,相对于output的publicPath路径
        outputPath: 'images/'
      }
    }
  ]
},

 

生产打包tree:

└── vue

    ├── favicon.ico

    ├── images

    │   ├── 1cb4d60d80d9ed007efb9f9d2f934a00.png

    │   └── 81f5b003430bdd08ee0ad4df21c3acf6.png

    ├── index

    │   └── index.html

    ├── js

    │   ├── 0.d0b19b9.js.gz

    │   ├── 1.d0b19b9.js.gz

    │   ├── fifa

    │   │   └── 2018.d0b19b9.js.gz

    │   ├── index.d0b19b9.js.gz

    │   ├── social

    │   │   └── photo.d0b19b9.js.gz

    │   └── tools

    │       ├── fifa.d0b19b9.js.gz

    │       ├── flag-logo

    │       │   └── all.d0b19b9.js.gz

    │       └── vscode.d0b19b9.js.gz

    └── tools

        ├── fifa

        │   └── index.html

        ├── flag-logo

        │   ├── all

        │   │   └── index.html

        │   └── index.html

        └──   

 

更多访问:github: https://github.com/qiaolevip

            or   coding

分享到:
评论

相关推荐

    webpack4.x配置demo

    一个简单的webpack4.x配置demo webpack4.x配置入门教程:https://blog.csdn.net/weixin_39291021/article/details/86569529

    webpack1.x指导文档

    - `webpack.config.js` 是 Webpack 的配置文件。 - `package.json` 是项目的元数据文件,包含项目依赖等信息。 ##### 1.2.3 配置 webpack.config.js ```javascript module.exports = { entry: './src/main.js', /...

    webpack4.x基础入门

    Webpack 4.x 支持使用 `webpack.config.js` 文件来配置打包行为。这个文件应该位于项目根目录下。通过配置不同的加载器(loaders)、插件(plugins)和其他选项,可以实现非常复杂的打包需求。 2. **常见问题解决*...

    webpack4.xDemo

    Webpack 4.x 是一款强大的模块打包工具,常用于前端开发,能够将JavaScript、CSS、图片等资源进行管理和优化。在本教程"webpack4.xDemo"中,我们将深入了解Webpack的基础使用,包括安装、配置以及打包过程,并针对...

    babel7.x和webpack4.x配置vue项目的方法步骤.docx

    在本文中,我们将探讨如何使用Babel 7.x和Webpack 4.x配置Vue项目,以及在升级和配置过程中可能遇到的问题及解决方案。 首先,让我们看看如何安装和配置这两个工具。在新的Vue项目中,你需要安装以下依赖: 1. `@...

    webpack静态资源一键上传阿里云OSS插件,兼容webpack3.x4.x-webpack-oss.zippycharm安装

    pycharm安装教程 webpack静态资源一键上传阿里云OSS插件,兼容webpack3.x4.x_webpack-oss.zip

    webpack5.md 文档

    webpack5.md 文档

    Full_Webpack-45.4.2608-IT310_Full_Webpack.exe

    Full_Webpack-45.4.2608-IT310_Full_Webpack.exe

    Webpack4中文手册(4.39.3).pdf

    - mode: 模式配置选项,可用于告诉webpack应该使用其内置的优化,选项包括"production"(生产环境,会自动启用优化)、"development"(开发环境,会启用优化且提供更丰富的错误信息和日志)和"none"(关闭优化)。...

    webpack-doc, 个人业余 webpack 1.x 文档翻译(非官方)(未完成).zip

    这个压缩包"webpack-doc, 个人业余 webpack 1.x 文档翻译(非官方)(未完成).zip"包含了一个个人爱好者对Webpack 1.x版本的非官方文档翻译项目,尽管未完成,但依然能为学习和理解Webpack提供一些帮助。...

    webpack.config.js

    webpack.config.jswebpack.config.js

    webpack01.rar

    在Webpack的配置文件(通常是webpack.config.js)中,你需要引入HtmlWebpackPlugin,并在plugins数组中添加一个新实例。实例化时,你可以传递一些选项来定制HTML模板,例如: ```javascript const ...

    webpack5.x:webpack5.x模板

    虽然Webpack 5.x 提供了零配置启动,但为了实现特定需求,开发者通常会创建`webpack.config.js`配置文件。配置文件中可以定义入口(entry)、输出(output)、模块规则(module rules)、插件(plugins)等,以实现代码分割...

    vue2.x-element2.x-webpack4.x-boilerplate:基于 vue 2.x + element-ui 2.x + webpack 4.x + jest 的一套脚手架

    vue2.x-element2.x-webpack4.x-boilerplate 基于 vue 2.x + element-ui 2.x + webpack 4.x + jest 的一套脚手架 环境依赖 node 不低于 v7.0.0 (webpack 4 要求 v6.11.5 及以上)

    webpack.config.js配置文件

    最近刚学的webpack3.0,从零到一套相对比较齐全的配置

    webpack4.x CommonJS模块化浅析

    这里需要注意的是,webpack4.x版本区分了webpack和webpack-cli两个包,分别用于模块打包和命令行工具,这与之前的版本有所不同,在之前的版本中这两个功能是合并在一起的。 在项目结构的搭建上,通常会分为源代码...

    webpackDemo.zip

    4. **配置文件(webpack.config.js)**: 这是 webpack 的核心配置文件,用来指定入口、输出、规则、加载器和插件等。 **二、webpack-dev-server** 1. **热模块替换(Hot Module Replacement, HMR)**: 开发服务器...

    webpack4.x开发环境配置详解

    下面我们就详细探讨一下webpack 4.x在开发环境中的配置方法,以及在配置过程中可能遇到的问题和解决方案。 首先,安装webpack是配置过程的第一步。在npm或yarn中不指定版本号时,会默认安装最新版本的webpack。在...

    Vue项目从webpack3.x升级webpack4不完全指南

    最后,在webpack.prod.conf.js中,泡面添加了optimization选项,这是一个在webpack 4.x版本中新增的配置项,用于优化和压缩代码。其中包括了runtimeChunk、minimizer和splitChunks等子选项,可以进一步优化输出的...

Global site tag (gtag.js) - Google Analytics