小编Dav*_*uez的帖子

您如何配置 Webpack 开发服务器以在通过不同的服务器运行站点的其余部分时为特定文件夹提供服务?

一些快速背景:

我公司的站点运行 CMS,由 CMS 处理所有路由。没有 html 文件,只有 razor 文件 (.cshtml)。虽然从头开始重做网站是我更喜欢做的,但这不是一种选择,所以我试图通过逐页将 vue.js 与 webpack 开发工作流逐页集成来慢慢地使网站现代化基础。

我花了大量时间设置 webpack,使其只能处理 /dist/ 文件夹中的文件 - 其他所有内容都通过http://my.server/ 提供服务,并由 CMS 和后端处理。

通过反复试验,我设法在 /dist/ 文件夹中获取 webpack-dev-server 服务文件,同时允许服务器的其余部分提供其他所有内容(通过http://my.server/)。不幸的是,这仅在 webpack-dev-server 部分的文件路径特别引用“ http://localhost:8080/ ”时才有效,这显然是不可接受的。

开发环境代码必须与生产环境代码完全一样,因此<script src="http://localhost:8080/dist/build.js"></script>是不可接受的。

但是,如果我只是编写<script src="/dist/build.js"></script>服务器将<script src="http://my.server/dist/build.js"></script>其解析为显然不正确并导致 404(因为这些文件仅从开发服务器提供)。

我的问题是,“如何配置 webpack-dev-server 以从自身提供 /dist/ 文件夹中的所有内容,同时允许通过“ http://my.server ”提供站点上的所有其他内容?

这是我的 webpack.config.js 文件以供参考:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js' …
Run Code Online (Sandbox Code Playgroud)

javascript webpack vue.js webpack-dev-server http-proxy-middleware

6
推荐指数
1
解决办法
1万
查看次数

空事件侦听器:可以吗?

一些快速背景

我正在构建一个在某些区域使用 html web 视图的 iOS 应用程序。我想确保这些页面上的 html 按钮看起来和感觉尽可能像 iOS 按钮。为了实现这一点,我想要一个点击状态,以便在点击时按下 html 按钮。现在在 HTML 中这很容易。您只需为 :active 或 :hover 或其他任何设置样式。我实际上已经定义了这个。然而,在 iOS 中,这些状态不会立即生效——至少在正常情况下是这样。所以我的目标是编写一个小脚本,为按钮添加一个类以更改其在touchstart 上的外观。

问题

然而,事实证明我不需要变得那么复杂……纯属偶然,我使用以下代码进行了测试:

document.addEventListener('touchstart', function(event) {
    console.log("test");
}, true);
Run Code Online (Sandbox Code Playgroud)

我对 javascript 和 jQuery 非常熟悉,所以我打算做的就是检查我的语法并确保当我点击按钮时 eventListener 被触发。令我惊讶的是,按钮的 :active 状态在 css 中被触发(以及 :hover 状态)。那个代码……解决了我的问题!

我的问题

所以这是我的问题:上面的代码有效吗?我的意思是,这样做不好吗?就好像空的 eventListener 刚刚触发了桌面浏览器已经提供的行为。使用这种方法有什么问题吗?我是绿色的,但我不想养成坏习惯。如果这是一种糟糕的编码方式,我不想使用它。

感谢你们给我的任何见解!

javascript mobile jquery button ios

5
推荐指数
1
解决办法
1911
查看次数

如何直接从组件访问Vue的路由数组?

所以我试图创建一个"上一页"/"下一页"类型的导航结构,它使用我的index.js(routes)文件中定义的路由顺序来确定下一个是哪一个.但是,我在确定如何访问Routes数组时遇到了一些困难. 这是我试图复制的导航示例(具有讽刺意味的是,它位于Vue网站的路线文档中 - 页面底部的两个小<>箭头).

这是我的index.js文件:

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/home/Home';
import SearchResults from '@/components/search/SearchResults';
import Vision from '@/components/who-we-are/Vision';

Vue.use(Router);

export default new Router({
  // mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/search-results',
      name: 'SearchResults',
      component: SearchResults,
    },
    {
      path: '/who-we-are/vision',
      name: 'Vision',
      component: Vision,
    },
  ],
});
Run Code Online (Sandbox Code Playgroud)

HTML:

<a @click="foo()">Next</a>
Run Code Online (Sandbox Code Playgroud)

脚本:

import Router from 'vue-router';

export default {
  name: 'home',
  methods: {
    foo() {
      console.log(this.Router.routes[0].path); …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vue-router

3
推荐指数
1
解决办法
1709
查看次数