Vue 教程(三十八)配置文件环境分离

最新推荐文章于 2024-01-05 20:26:10 发布

_否极泰来_

最新推荐文章于 2024-01-05 20:26:10 发布

阅读量669

点赞数 1

分类专栏： # Vue教程

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/yuan_xw/article/details/119515250

版权

本文是Vue教程的第38部分，讲解如何进行配置文件的环境分离。内容包括创建`base.config.js`，`prod.config.js`和`dev.config.js`，在`build`目录下，并配置`package.json`以实现不同环境的设置。通过`webpack-dev-server`进行本地服务配置，如自动打开浏览器和指定默认浏览器。最后，通过`webpackMerge`将配置整合到`package.json`中。

摘要由CSDN通过智能技术生成

Vue 教程(三十八)配置文件环境分离

修改配置文件

在项目根目录下新建文件夹【build】，在该目录下新建三个文件分别为：【base.config.js】、【prod.config.js】【dev.config.js】

base.config.js 内容如下：

// 导入Node中path常量
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
     
  entry: "./src/main.js",
  output: {
     
    path: path.resolve(__dirname, "../dist"),
    filename: "bundle.js",
    // publicPath: 'dist/'
  },
  resolve: {
     
    // alias：别名
    alias: {
     
      vue$: "vue/dist/vue.esm.js",
    },
  },
  module: {
     
    rules: [
      {
     
        test: /\.css$/,
        /**
         * css-loader:只负责将css文件进行加载
         * style-loader:负责将样式添加到DOM中
         * 使用多个loader时,是从右向左
         */
        use: ["style-loader", "css-loader"],
      },
      {<