Question

如何将我的sass url更改设置为PubilcUrl？我设置了webpack vue.confing.js。但是没用。

我不能很好地使用englist。但是，请阅读您的代码并使用Google翻译。

vue.config.js

module.exports = {
  publicPath: "./",
  devServer: {
    disableHostCheck: true
  }
};

webpack.config

let rendererConfig = {
  devtool: "#cheap-module-eval-source-map",
  entry: {
    renderer: path.join(__dirname, "../src/renderer/main.js")
  },
  externals: [
    ...Object.keys(dependencies || {}).filter(
      d => !whiteListedModules.includes(d)
    )
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["vue-style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.sass$/,
        use: ["vue-style-loader", "css-loader", "sass-loader?indentedSyntax"]
      },
      {
        test: /\.less$/,
        use: ["vue-style-loader", "css-loader", "less-loader"]
      },
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"]
      },
      {
        test: /\.node$/,
        use: "node-loader"
      },
      {
        test: /\.vue$/,
        use: {
          loader: "vue-loader",
          options: {
            extractCSS: process.env.NODE_ENV === "production",
            loaders: {
              sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax=1",
              scss: "vue-style-loader!css-loader!sass-loader",
              less: "vue-style-loader!css-loader!less-loader"
            }
          }
        }
      }
    ]
  },
  node: {
    __dirname: process.env.NODE_ENV !== "production",
    __filename: process.env.NODE_ENV !== "production"
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({ filename: "styles.css" }),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.resolve(__dirname, "../src/index.ejs"),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules:
        process.env.NODE_ENV !== "production"
          ? path.resolve(__dirname, "../node_modules")
          : false
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
  output: {
    filename: "[name].js",
    libraryTarget: "commonjs2",
    path: path.join(__dirname, "../dist/electron"),
    publicPath: "./"
  },
  resolve: {
    alias: {
      "@": path.join(__dirname, "../src/renderer"),
      vue$: "vue/dist/vue.esm.js" // 'vue/dist/vue.common.js' for webpack 1
    },
    extensions: [".ts", ".tsx", ".js", ".vue", ".json", ".css", ".node"]
  },
  target: "electron-renderer"
};

/**
 * Adjust rendererConfig for development settings
 */
if (process.env.NODE_ENV !== "production") {
  rendererConfig.plugins.push(
    new webpack.DefinePlugin({
      __static: `"${path.join(__dirname, "../static").replace(/\\/g, "\\\\")}"`
    })
  );
}

/**
 * Adjust rendererConfig for production settings
 */
if (process.env.NODE_ENV === "production") {
  rendererConfig.devtool = "";

  rendererConfig.plugins.push(
    new BabiliWebpackPlugin(),
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, "../static"),
        to: path.join(__dirname, "../dist/electron/static"),
        ignore: [".*"]
      }
    ]),
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": '"production"'
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  );
}

我的Vue组件

<template>
  <section class="App">
    <hgroup>
      <h2>오늘 뭐 먹지</h2>
      <h3>하단 검색을 통해 나온 음식들 중에서 먹고픈걸 골라봅시다</h3>
    </hgroup>
    <input type="text" v-on:input="searchTerm" />
    <FoodCard v-bind:foods="TestInfo" />
  </section>
</template>
<script lang="ts">
import FoodCard from "./FoodCard/FoodCard.vue";
import Vue from "vue";
import axios from "axios";
import "./SearchPage.scss";

const XmlReader = require("xml-reader");
const XmlSearched: any[] = [
  {
    name: "김치김밥",
    weight: 100,
    kcal: 100,
    carbon: 10,
    protein: 10,
    fat: 20,
    fiber: 10,
    water: 30,
    imgurl: "sample_food"
  }
];
const XmlKeyWord = "김치";

export default Vue.extend({
  components: { FoodCard },
  data: () => {
    return {
      message: "Hello",
      TestInfo: XmlSearched,
      keyWord: XmlKeyWord
    };
  },
  methods: {
    searchTerm(event: any) {
      var queryParams = "static/foods.xml";
      // creating from single ast
      var xq: any = "";
      axios.get(`${queryParams}`).then(result => {
        xq = XmlReader.parseSync(result.data);
        this.$data.kewWord = event.target.value;
        this.$data.TestInfo = [];
        setTimeout(() => {
          xq.children.forEach((node: any) => {
            if (
              this.$data.keyWord != "" &&
              node.children[0].children[0].value
                .trim()
                .indexOf(event.target.value) != -1 &&
              this.$data.TestInfo.length < 10
            ) {
              this.$data.TestInfo.push({
                name: node.children[0].children[0].value,
                weight: parseInt(node.children[1].children[0].value),
                kcal: parseInt(node.children[2].children[0].value),
                carbon: parseInt(node.children[3].children[0].value),
                protein: parseInt(node.children[4].children[0].value),
                fat: parseInt(node.children[5].children[0].value),
                fiber: parseInt(node.children[6].children[0].value),
                water: parseInt(node.children[7].children[0].value),
                imgurl: node.children[8].children[0].value
              });
            }
          });
        }, 100);
      });
    }
  },
  beforeMount() {}
});
</script>

我的CSS


body {
  background: #e8e0e0 url("/static/main_bg.jpg") top center no-repeat;
  background-size: cover;
  width: calc(100vw - 10px);
  height: 100vh;
  font-family: "NanumSquare";
  text-align: center;
  overflow: auto;
  overflow-x: hidden;
}
* {
  margin: 0px;
  padding: 0px;
  word-break: keep-all;
  @include scrollbar;
}

我想更改“背景：＃e8e0e0 url（/static/main_bg.jpg）” =>“背景：＃e8e0e0 url（./ static / main_bg.jpg）”

我如何设置publicPath webpack + electron-vue

0 个答案: