一些快速背景:
我公司的站点运行 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
一些快速背景
我正在构建一个在某些区域使用 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 刚刚触发了桌面浏览器已经提供的行为。使用这种方法有什么问题吗?我是绿色的,但我不想养成坏习惯。如果这是一种糟糕的编码方式,我不想使用它。
感谢你们给我的任何见解!
所以我试图创建一个"上一页"/"下一页"类型的导航结构,它使用我的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)